इसके आसपास की सीमा के साथ एक एसवीजी "लाइन" कैसे बनाएं?

Question

मेरे पास एक छोटा एसवीजी विजेट है जिसका उद्देश्य कोणों की एक सूची प्रदर्शित करना है (छवि देखें)।

अभी, कोण रेखा तत्व हैं, जिनमें केवल स्ट्रोक है और कोई भर नहीं है। लेकिन अब मैं इसके अंदर "अंदर भरने" रंग और "स्ट्रोक/सीमा" रखना चाहता हूं। मुझे लगता है कि रेखा तत्व इसे संभाल नहीं सकता है, तो इसके बजाय मुझे क्या उपयोग करना चाहिए?

ध्यान दें कि लाइन के स्ट्रोक का लाइन-एंडकैप गोलाकार है। मैं समाधान में इस प्रभाव को बनाए रखना चाहता हूं।

<svg height="160" version="1.1" viewBox="-0.6 -0.6 1.2 1.2" width="160" xmlns="http://www.w3.org/2000/svg"> 
    <g> 
    <g> 
     <circle class="sensorShape" cx="0" cy="0" fill="#FFF" r="0.4" stroke="black" stroke-width="0.015"/> 
     <line stroke="black" stroke-width="0.015" x1="0" x2="0" y1="-0.4" y2="0.4"/> 
     <line stroke="black" stroke-width="0.015" x1="-0.4" x2="0.4" y1="0" y2="0"/> 
    </g> 
    <g class="lsNorthAngleHandsContainer"> 
     <line data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.04" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/> 
     <text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)"> 
     348 
     </text> 
    </g> 
    </g> 
</svg> 

Answer 1

, एक दूसरी पंक्ति जोड़े एक ही निर्देशांक लेकिन पतली लाइन चौड़ाई के साथ:

<g class="lsNorthAngleHandsContainer"> 
    <line data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.04" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/> 
    <line data-angle="348" stroke="yellow" stroke-linecap="round" stroke-width="0.025" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/> 

Answer 2

ताकि आप केवल "बाहर" रंग के साथ मोटा लाइन के शीर्ष पर "अंदर" रंग के साथ एक पतली रेखा आकर्षित कर सकते हैं यह लग रहा है अपनी लाइन की तरह अपारदर्शी है।

Answer 3

आप गोलाकार कोनों के साथ एक रेक्ट इस्तेमाल कर सकते हैं, लेकिन गणित थोड़ा परिवर्तन:

<rect data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.02" fill="#FF0" transform="rotate(348, 0, 0)" x="-0.02" y="-0.4" width=".06" height=".4" rx=".03" ry=".03"/> 

http://jsfiddle.net/RNAuP/

Answer 4

आप इसे पथ के साथ भी कर सकते हैं, भले ही यह गोल बिट्स के आसपास मुश्किल हो:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ 
    <!-- I often use entities to be able to change lot of numbers at once in static SVG, also kind of makes the paths more readable. 
     Obvisouly, if you're generating the path you can use the same variables in code to append to d --> 
    <!ENTITY handFill "0.01"> 
    <!ENTITY handFill2 "0.02"><!-- Should be 2 * handFill to be centered --> 
    <!ENTITY handStroke "0.005"><!-- Should be less than handFill2 to not hide fill --> 
]> 
<svg height="160" version="1.1" viewBox="-0.6 -0.6 1.2 1.2" width="160" xmlns="http://www.w3.org/2000/svg"> 
    <g> 
    <g> 
     <circle class="sensorShape" cx="0" cy="0" fill="#FFF" r="0.4" stroke="black" stroke-width="0.015"/> 
     <line stroke="black" stroke-width="0.015" x1="0" x2="0" y1="-0.4" y2="0.4"/> 
     <line stroke="black" stroke-width="0.015" x1="-0.4" x2="0.4" y1="0" y2="0"/> 
    </g> 
    <g class="lsNorthAngleHandsContainer"> 
     <path d=" 
     M -&handFill;,0 l0,-0.4 
     a &handFill;,&handFill; 0 0,1 &handFill2;,0 
     l 0,0.4 
     a &handFill;,&handFill; 0 0,1 -&handFill2;,0 
     " stroke="red" stroke-linecap="round" stroke-width="&handStroke;" fill="yellow" transform="rotate(348)" /> 
     <text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)"> 
     348 
     </text> 
    </g> 
    </g> 
</svg> 

Answer 5

मुझे illustration से filling and stroking के बारे में W3C आलेख से प्रेरित सुरुचिपूर्ण समाधान मिला। मूल रूप से, आप परिभाषाओं के लिए पथ ले जाने और दो तत्वों आकर्षित करने के लिए इस परिभाषा का उपयोग करें:

<svg width="200" height="200" viewBox="0 0 100 100"> 
    <defs> 
     <line id="line1" x1="25" x2="75" y1="25" y2="75"/> 
    </defs> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#line1" class="stroke"></use> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#line1" class="line"></use> 
</svg> 

<defs> का उपयोग करके और <use> आप दोनों पंक्तियां अद्यतन करने के लिए केवल पथ तत्व बदल सकते हैं। JSFiddle डेमो