এসভিজিতে পাঠ্যের পটভূমির রঙ

103

আমি এসএসজি এর পটভূমি CSS এর textঅনুরূপ রঙ করতে চাইbackground-color

আমি কেবলমাত্র ডকুমেন্টেশন সন্ধান করতে পেরেছি fill, যা টেক্সটটিকে রঙ করে

এটা কি সম্ভব?

css  svg  background-color 
— নিক জিন্যান্তো
সূত্র
আপনি কি এখন পর্যন্ত আপনার কোডটি ভাগ করতে পারেন?
— গোটোহেলস
এগুলোও সাহায্য করতে পারে stackoverflow.com/questions/6725288/svg-text-inside-rect এবং stackoverflow.com/questions/8675223/...
— gotohales
ফিল্টারগুলি ব্যবহার করে এটি কীভাবে করা যায় তাও স্ট্যাকওভারফ্লো.com/ প্রশ্নগুলি / १२২60০৩70০/২ দেখায়।
— এরিক ডালস্ট্রোম
4
@ রবার্টলঙ্গসন এই প্রশ্নটিকে নকল হিসাবে বন্ধ করে যখন অন্যটির 2 বছর আগে জিজ্ঞাসা করা হয়েছিল তখন ভুল মনে হয়, বিশেষত যখন সেখানে কেবল উত্তরটি আপনারই থাকে।
— বালথাজার
@ অপেরু: নকল লক্ষ্য নির্বাচন করার সময় কোনও প্রশ্নের বয়সই মূল কারণ নয়, উদাহরণস্বরূপ এখানে দেখুন ।
— হন্ক

উত্তর:

95

না এটি সম্ভব নয়, এসভিজি উপাদানগুলির background-... উপস্থাপনা বৈশিষ্ট্য নেই ।

এই প্রভাবটি অনুকরণ করতে আপনি পাঠ্য বৈশিষ্ট্যের পিছনে একটি আয়তক্ষেত্র আঁকতে পারেন fill="green"বা অনুরূপ কিছু (ফিল্টার)। জাভাস্ক্রিপ্ট ব্যবহার করে আপনি নিম্নলিখিতগুলি করতে পারেন:

var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttribute("x", SVGRect.x);
    rect.setAttribute("y", SVGRect.y);
    rect.setAttribute("width", SVGRect.width);
    rect.setAttribute("height", SVGRect.height);
    rect.setAttribute("fill", "yellow");
    ctx.insertBefore(rect, textElm);
— sluijs
সূত্র
9
এটি বা পাঠ্যের উপর একটি এসজিজি ফিল্টার (ফেফ্লুড + ফে কমপোজিট) ব্যবহার করুন। সামান্য অনুরূপ প্রশ্ন স্ট্যাকওভারফ্লো . com/ প্রশ্নগুলি / 12260370/… দেখুন ।
— এরিক ডালস্ট্রোম
4
GetBBox () ব্যবহার করে এই সমাধানটি যদিও এটি ঠিক ঠিক কাজ করে, যখন প্রচুর পরিমাণে গণনা করা দরকার তখন বেশ ধীর হতে পারে। একটি এসজিজি ফিল্টার (ফেফ্লুড + ফেইম কমপোজিট) ব্যবহার করার বিষয়টি হ'ল পাঠটি কিছুটা ঝাঁকুনির সাথে বেরিয়ে আসে। নীচে একটি সহজ, কিন্তু হ্যাকি সমাধান অফার করেছেন।
— dbarton_uk
TextElm = ctx.getElementById ("the-text") এর পরিবর্তে TextElm = document.getElementById ("the-text") ব্যবহার করা ভাল?
— সাইমন হাই
আমি নোডজেএস-তে একই গতিবক্স ফাংশনটি কীভাবে ব্যবহার করি
— আলী
78

আপনি পটভূমি উত্পন্ন করতে একটি ফিল্টার ব্যবহার করতে পারেন।

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic" operator="xor" />
    </filter>
  </defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>
স্নিপেট প্রসারিত করুন

— রবার্ট লংশন
সূত্র
4
"সোর্সগ্রাফিক" এর অর্থ এখানে কী? "ইউআরএল (# সোলিড)" আসলে কী কোনও অতিরিক্ত ওয়েব অ্যাক্সেসের কারণ করে?
— বেন স্লেড
7
পাঠ্যটি এখানে অস্পষ্ট :(
— তেরান
4
আপনি কি ব্যাকগ্রাউন্ড প্যাডিং দিতে পারেন ?
— vsync
4
এই সমাধানটি তাত্ত্বিকভাবে পছন্দ করুন তবে এটি নিশ্চিত করতে পারবেন যে পাঠ্যটি অস্পষ্ট। দেখে মনে হচ্ছে ফিল্টারটি অ্যান্টি-এলিয়জিং ব্রেক করে।
— পৌলমনিকো
4
অস্পষ্ট লেখাটি প্রতিরোধ operator="xor"করতে যুক্ত করুন feComposite। @RobertLongson @teran @paulmelnikow @bill
— Saeid
20

আমি যে সমাধানটি ব্যবহার করেছি তা হ'ল:

<svg>
  <line x1="100" y1="100" x2="500" y2="100" style="stroke:black; stroke-width: 2"/>    
  <text x="150" y="105" style="stroke:white; stroke-width:0.6em">Hello World!</text>
  <text x="150" y="105" style="fill:black">Hello World!</text>  
</svg>

স্ট্রোক এবং স্ট্রোক-প্রস্থের বৈশিষ্ট্য সহ একটি সদৃশ পাঠ্য আইটেম স্থাপন করা হচ্ছে। স্ট্রোকটি পটভূমির রঙের সাথে মিলিত হওয়া উচিত এবং স্ট্রোক-প্রস্থটি একটি "স্প্লডজ" তৈরি করতে যথেষ্ট বড় হওয়া উচিত যার উপর প্রকৃত পাঠ্যটি লিখতে হবে।

কিছুটা হ্যাক এবং সম্ভাব্য সমস্যা রয়েছে তবে আমার পক্ষে কাজ করে!

— dbarton_uk
সূত্র
4
আমি এই সমাধানটি সবচেয়ে সহজ হিসাবে পেয়েছি।
— মরগান উইল্ড
এটি সবচেয়ে সহজ সমাধান হিসাবে নিশ্চিত করেছেন
— বিজ্ঞানী
ফিল্টার সমাধান মুদ্রণ সময় খুব ঝাপসা ছিল যেখানে দুর্দান্তভাবে মুদ্রণ।
— ডেভিড হান্ট
18

না, আপনি এসভিজি উপাদানগুলিতে পটভূমি রঙ যুক্ত করতে পারবেন না। আপনি এটি d3 দিয়ে প্রোগ্রামগতভাবে করতে পারেন ।

var text = d3.select("text");
var bbox = text.node().getBBox();
var padding = 2;
var rect = self.svg.insert("rect", "text")
    .attr("x", bbox.x - padding)
    .attr("y", bbox.y - padding)
    .attr("width", bbox.width + (padding*2))
    .attr("height", bbox.height + (padding*2))
    .style("fill", "red");
— nnattawat
সূত্র
4
এটা কাজ করে না; এটি কেবল পাঠ্যের রঙ পরিবর্তন করে, পটভূমির রঙটি নয়।
— ডেভিড জে।
4
ঘিরা টেক্সট একটি DIV আছে বা বিঘত এবং যেটা গত দুই আপনার ব্যবহার করেছেন styling প্রয়োগ করুন।
— আরিফ বুরহান 1
এই পোস্টটি এটি ভালভাবে ব্যাখ্যা করেছে: ক্যামব্রিজ- ইনটহলেন্স.com/…
— বিনিময় করুন
6

<text>ট্যাগ ব্যবহার করার পরিবর্তে, ট্যাগটি ব্যবহার করা <foreignObject>যেতে পারে, যা সিএসএসের সাহায্যে এক্সএইচটিএমএল সামগ্রীের জন্য অনুমতি দেয়।

— ক্রিস জি
সূত্র
4
আপনি একটি উদাহরণ ছেড়ে যেতে পারেন?
— IgniteCoders
4
আন্ডাররেটেড উত্তর। বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এসভিজি / এলিমেট / ফায়ারফাইনবজেক্টে একটি দরকারী উদাহরণ রয়েছে। আপনার বিদেশী অবজেক্টের মধ্যে আপনি CSS সংজ্ঞা সহ ডিভ এবং স্প্যান ব্যবহার করতে পারেন।
— ডাঃ জেরি
4

রবার্ট লংসসন (@ রবার্টলংসসন) এর পরিবর্তনের মাধ্যমে উত্তর: 

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic" operator="xor"/>
    </filter>
  </defs>
  <text filter="url(#solid)" x="20" y="50" font-size="50"> solid background </text>
  <text x="20" y="50" font-size="50">solid background</text>
</svg>

এবং আমাদের কোনও ঝাপসা নেই এবং ভারী কোনও "getBox" নেই :) ফিল্ডিং সহ পাঠ্য-উপাদানগুলিতে সাদা স্থান দ্বারা প্যাডিং সরবরাহ করা হয়। এটা আমার জন্য কাজ

— রোমান বেলভ
সূত্র
2

এটি আমার প্রিয় হ্যাক (এটি কাজ করা উচিত তা নিশ্চিত নয়)। এটি এমন একটি উপাদান উল্লেখ করে যা এখনও প্রদর্শিত হয়নি এবং এটি বেশ ভালভাবে কাজ করে

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 620 40" preserveAspectRatio="xMidYMid meet">
    <defs>
        <filter x="-0.02" y="0" width="1.04" height="1.1" id="removebackground">
            <feFlood flood-color="#00ffff"/>
        </filter>
    </defs>

    <!--Draw the text--> 
    <use xlink:href="#mygroup" filter="url(#removebackground)" />
    <g id="mygroup">
        <text id="text1" x="9" y="20" style="text-anchor:start;font-size:14px;">custom text with background</text>  
        <line x1="200" y1="18" x2="200" y2="36" stroke="#000" stroke-width="5"/> 
        <line x1="120" y1="27" x2="203" y2="27" stroke="#000" stroke-width="5"/> 
    </g>
</svg>
স্নিপেট প্রসারিত করুন

— Calimero100582
সূত্র
2

আপনি পাঠ্যের সাথে ফিল্টার একত্রিত করতে পারেন।

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>SVG colored patterns via mask</title>
  </head>
  <body>
    <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter x="0" y="0" width="1" height="1" id="bg-text">
          <feFlood flood-color="white"/>
          <feComposite in="SourceGraphic" operator="xor" />
        </filter>
      </defs>
	  <!-- something has already existed -->
    <rect fill="red" x="150" y="20" width="100" height="50" />
    <circle cx="50"  cy="50" r="50" fill="blue"/>
      
      <!-- Text render here -->
      <text filter="url(#bg-text)" fill="black" x="20" y="50" font-size="30">text with color</text>
      <text fill="black" x="20" y="50" font-size="30">text with color</text>
    </svg>
  </body>
</html>
স্নিপেট প্রসারিত করুন

— ভু ফান
সূত্র
1

রবার্টের উত্তরের মতো একটি পটভূমি যখন কোনও পাঠ্য উপাদানটিতে প্যাডিং প্রয়োগ করতে হয় তা ভাবতে তাদের জন্য নিম্নলিখিতটি করুন:

  <svg>
    <defs>
      <filter x="-0.1" y="-0.1" width="1.2" height="1.2" id="solid">
        <feFlood flood-color="#171717"/>
        <feComposite in="SourceGraphic" operator="xor" />
      </filter>
    </defs>
    <text filter="url(#solid)" x="20" y="50" font-size="50">Hello</text>
  </svg>

উপরের উদাহরণে, ফিল্টার এর এক্স এবং ওয়াই অবস্থানগুলি যেমন ব্যবহার করা যেতে পারে transform: translate(-10%, -10%), এবং প্রস্থ এবং উচ্চতার মানগুলি 120%এবং হিসাবে পড়া যায়120% । সুতরাং আমরা ২০% বড় ব্যাকগ্রাউন্ড তৈরি করেছি এবং এটি -১০% অফসেট করেছি, সুতরাং পাঠ্যের প্রতিটি অংশে পটভূমি এখন 10% বড়।

— ম্যামসিলু
সূত্র
0

পূর্ববর্তী উত্তরগুলি পাঠ্য দ্বিগুণ করার উপর নির্ভর করেছিল এবং পর্যাপ্ত সাদা জায়গার অভাব ছিল।

ব্যবহারের atopএবং&nbsp; আমি যে ফলাফল চেয়েছিলাম তা পেতে সক্ষম হয়েছি।

এই উদাহরণে তীর অন্তর্ভুক্ত রয়েছে, এসভিজি পাঠ্য লেবেলের জন্য একটি সাধারণ ব্যবহারের কেস: 

<svg viewBox="-105 -40 210 234">
<title>Size Guide</title>
<defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
        <feFlood flood-color="white"></feFlood>
        <feComposite in="SourceGraphic" operator="atop"></feComposite>
    </filter>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 0 0 L 10 5 L 0 10 z"></path>
    </marker>
</defs>
<g id="garment">
    <path id="right-body" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 0 l30 0 l0 154 l-30 0"></path>
    <path id="right-sleeve" d="M30 0 l35 0 l0 120 l-35 0" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></path>
    <use id="left-body" href="#right-body" transform="scale(-1,1)"></use>
    <use id="left-sleeve" href="#right-sleeve" transform="scale(-1,1)"></use>
    <path id="collar-right-top" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 -6.5 l11.75 0 l6.5 6.5"></path>
    <use id="collar-left-top" href="#collar-right-top" transform="scale(-1,1)"></use>
    <path id="collar-left" fill="white" stroke="black" stroke-width="1" stroke-linejoin="round" d="M-11.75 -6.5 l-6.5 6.5 l30 77 l6.5 -6.5 Z"></path>
    <path id="front-right" fill="white" stroke="black" stroke-width="1" d="M18.25 0 L30 0 l0 154 l-41.75 0 l0 -77 Z"></path>
    <line x1="0" y1="0" x2="0" y2="154" stroke="black" stroke-width="1" stroke-dasharray="1 3"></line>
    <use id="collar-right" href="#collar-left" transform="scale(-1,1)"></use>
</g>
<g id="dimension-labels">
    <g id="dimension-sleeve-length">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="85" y1="0" x2="85" y2="120" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="85" y="60" class="dimension" text-anchor="middle" dominant-baseline="middle"> 120 cm</text>
    </g>
    <g id="dimension-length">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-85" y1="0" x2="-85" y2="154" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="-85" y="77" text-anchor="middle" dominant-baseline="middle" class="dimension"> 154 cm</text>
    </g>
    <g id="dimension-sleeve-to-sleeve">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-65" y1="-20" x2="65" y2="-20" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="0" y="-20" text-anchor="middle" dominant-baseline="middle" class="dimension">&nbsp;130 cm&nbsp;</text>
    </g>
    <g title="Back Width" id="dimension-back-width">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-30" y1="174" x2="30" y2="174" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="0" y="174" text-anchor="middle" dominant-baseline="middle" class="dimension">&nbsp;60 cm&nbsp;</text>
    </g>
</g>
</svg>
— হেনরি বিড়াল
সূত্র
-1

আপনি আপনার পাঠ্যে শৈলী যুক্ত করতে পারেন: 

  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    text-shadow: rgb(255, 255, 255) -2px -2px 0px, rgb(255, 255, 255) -2px 2px 0px, 
     rgb(255, 255, 255) 2px -2px 0px, rgb(255, 255, 255) 2px 2px 0px;"

সাদা, এই উদাহরণে। আইই তে কাজ করে না :)

— জান পাই
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.