আমি এসএসজি এর পটভূমি CSS এর text
অনুরূপ রঙ করতে চাইbackground-color
আমি কেবলমাত্র ডকুমেন্টেশন সন্ধান করতে পেরেছি fill
, যা টেক্সটটিকে রঙ করে
এটা কি সম্ভব?
আমি এসএসজি এর পটভূমি CSS এর text
অনুরূপ রঙ করতে চাইbackground-color
আমি কেবলমাত্র ডকুমেন্টেশন সন্ধান করতে পেরেছি fill
, যা টেক্সটটিকে রঙ করে
এটা কি সম্ভব?
উত্তর:
না এটি সম্ভব নয়, এসভিজি উপাদানগুলির 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);
আপনি পটভূমি উত্পন্ন করতে একটি ফিল্টার ব্যবহার করতে পারেন।
<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>
operator="xor"
করতে যুক্ত করুন feComposite
। @RobertLongson @teran @paulmelnikow @bill
আমি যে সমাধানটি ব্যবহার করেছি তা হ'ল:
<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>
স্ট্রোক এবং স্ট্রোক-প্রস্থের বৈশিষ্ট্য সহ একটি সদৃশ পাঠ্য আইটেম স্থাপন করা হচ্ছে। স্ট্রোকটি পটভূমির রঙের সাথে মিলিত হওয়া উচিত এবং স্ট্রোক-প্রস্থটি একটি "স্প্লডজ" তৈরি করতে যথেষ্ট বড় হওয়া উচিত যার উপর প্রকৃত পাঠ্যটি লিখতে হবে।
কিছুটা হ্যাক এবং সম্ভাব্য সমস্যা রয়েছে তবে আমার পক্ষে কাজ করে!
না, আপনি এসভিজি উপাদানগুলিতে পটভূমি রঙ যুক্ত করতে পারবেন না। আপনি এটি 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");
<text>
ট্যাগ ব্যবহার করার পরিবর্তে, ট্যাগটি ব্যবহার করা <foreignObject>
যেতে পারে, যা সিএসএসের সাহায্যে এক্সএইচটিএমএল সামগ্রীের জন্য অনুমতি দেয়।
রবার্ট লংসসন (@ রবার্টলংসসন) এর পরিবর্তনের মাধ্যমে উত্তর:
<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" নেই :) ফিল্ডিং সহ পাঠ্য-উপাদানগুলিতে সাদা স্থান দ্বারা প্যাডিং সরবরাহ করা হয়। এটা আমার জন্য কাজ
এটি আমার প্রিয় হ্যাক (এটি কাজ করা উচিত তা নিশ্চিত নয়)। এটি এমন একটি উপাদান উল্লেখ করে যা এখনও প্রদর্শিত হয়নি এবং এটি বেশ ভালভাবে কাজ করে
<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>
আপনি পাঠ্যের সাথে ফিল্টার একত্রিত করতে পারেন।
<!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>
রবার্টের উত্তরের মতো একটি পটভূমি যখন কোনও পাঠ্য উপাদানটিতে প্যাডিং প্রয়োগ করতে হয় তা ভাবতে তাদের জন্য নিম্নলিখিতটি করুন:
<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% বড়।
পূর্ববর্তী উত্তরগুলি পাঠ্য দ্বিগুণ করার উপর নির্ভর করেছিল এবং পর্যাপ্ত সাদা জায়গার অভাব ছিল।
ব্যবহারের atop
এবং
আমি যে ফলাফল চেয়েছিলাম তা পেতে সক্ষম হয়েছি।
এই উদাহরণে তীর অন্তর্ভুক্ত রয়েছে, এসভিজি পাঠ্য লেবেলের জন্য একটি সাধারণ ব্যবহারের কেস:
<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"> 130 cm </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"> 60 cm </text>
</g>
</g>
</svg>