एसवीजी में पाठ पर रूपरेखा प्रभाव कैसे प्राप्त करें?

Question

मैं बस एक साधारण एसवीजी छवि चाहता हूं जिसमें कोण पर कुछ मनमाना पाठ हो, जो मैं कर सकता हूं। बात यह है कि, मैं यह भी चाहता हूं कि टेक्स्ट में "रूपरेखा" प्रभाव हो। एक ठोस डी के बजाए, अक्षर डी के अंदर और बाहर किनारों को एक निर्दिष्ट मोटाई की रेखा से खींचा जाता है और शेष डी को बिल्कुल खींचा नहीं जाता है, ताकि लगभग "खोखला" दिखाई दे।

क्या एसवीजी ऐसा कर सकता है?

Answer 1

हाँ, यह कर सकते हैं ;-)

मैं एहसास है कि Inkscape साथ करने की कोशिश की और फिर svg फ़ाइल के स्रोत का संपादन किया। बस इसे भरें और इसे खींचने के लिए रंग और चौड़ाई के साथ स्ट्रोक का उपयोग करें। मुझे मिल गया है कि:

<text x="100" y="100" id="text2383" xml:space="preserve" style="font-size:56px;font-style:normal;font-weight:normal;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"> 
 
<tspan x="100" y="100" id="tspan2385">D</tspan></text>

दिलचस्प हिस्सा "शैली" विशेषता में है।

"fill:none;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;" 

Answer 2

एसवीजी में ग्राफिकल ऑब्जेक्ट्स भर सकते हैं (डिफ़ॉल्ट रूप से काला) और स्ट्रोक (डिफ़ॉल्ट रूप से कोई नहीं)। यदि आप अपने पाठ पर लाल रूपरेखा चाहते हैं, तो fill = "none" और स्ट्रोक = "लाल" सेट करें। आप स्ट्रोक-चौड़ाई संपत्ति के मूल्य को भी ट्विक करना चाहते हैं।

Answer 3

रूपरेखा के लिए एक और उदाहरण है और चमकता यहां दी गई है: http://www.w3.org/People/Dean/svg/texteffects/index.html

<svg width="350" height="75" viewBox="0 0 350 75"><title>MultiStroke</title><rect x="0" y="0" width="350" height="75" style="fill: #09f"/><g style="overflow:hidden; text-anchor: middle; font-size:45; font-weight: bold; font-family: Impact"><text x="175" y="55" style="fill: white; stroke: #0f9; stroke-width: 14"> 
    Stroked Text 
    </text><text x="175" y="55" style="fill: white; stroke: #99f; stroke-width: 8"> 
    Stroked Text 
    </text><text x="175" y="55" style="fill: white; stroke: black; stroke-width: 2"> 
    Stroked Text 
    </text></g> 
</svg> 

Answer 4

रंग-आदेश: स्ट्रोक; इस डी 3 चार्ट में मेरे लिए काम कर रहा है जिस पर मैं काम कर रहा हूं।

मेरे अंतिम सीएसएस:

.name-text { 
    font-size: 18px; 
    paint-order: stroke; 
    stroke: #000000; 
    stroke-width: 1px; 
    stroke-linecap: butt; 
    stroke-linejoin: miter; 
    font-weight: 800; 
} 

मेरे स्रोत (बस थोड़ा नीचे स्क्रॉल करें): https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty

Answer 5

आप <feMorphology> के साथ इस के लिए एक <filter>, और अधिक विशेष संयोजन का उपयोग कर सकते हैं:

<svg style="height:100px;width:100%;background-color:Green"> 
 

 
<defs> 
 
<filter id="whiteOutlineEffect"> 
 
    <feMorphology in="SourceAlpha" result="MORPH" operator="dilate" radius="2" /> 
 
    <feColorMatrix in="MORPH" result="WHITENED" type="matrix" values="-1 0 0 1 0, 0 -1 0 1 0, 0 0 -1 1 0, 0 0 0 1 0"/> 
 
    <feMerge> 
 
    <feMergeNode in="WHITENED"/> 
 
    <feMergeNode in="SourceGraphic"/> 
 
    </feMerge> 
 
</filter> 
 
</defs> 
 

 
<g> 
 
    <text x="10" y="50" fill="black" font-size="60" filter="url(#whiteOutlineEffect)"> 
 
    Example 
 
    </text> 
 
</g> 
 

 
</svg>

आपको फिल्टर कैनवास आकार अनुकूलित करने के लिए फिल्टर की x/y/width/height गुण धुन करने के लिए है, यह भी Humongous height value for <filter> not preventing cutoff या Gaussian blur cutoff at edges देख सकते हैं। https://bl.ocks.org/Herst/d5db2d3d1ea51a8ab8740e22ebaa16aa