एसवीजी स्ट्रोक-चौड़ाई क्यों है: 1 लाइनों को पारदर्शी बनाना?

Question

मैं svg साथ शेयर चार्ट बना रहा हूं और जब मैं लाइनों अधिक संकीर्ण बनाने के बजाय 1. करने के लिए अपने पथ तत्वों के स्ट्रोक-चौड़ाई सेट मैं समस्या आ रही है, यह सिर्फ यह स्ट्रोक-चौड़ाई के रूप में एक ही आकार में आता है : 2 लेकिन थोड़ा पारदर्शी। मैं इसके बारे में एक छवि पोस्ट नहीं कर सकते, क्योंकि मैं काफी प्रतिष्ठा अंक नहीं है ...

मेरे svg टैग तो दिखाई देता है:

<div style="height:300px; width:400px; overflow:hidden"> 
<svg style="position:relative" height="10000" width="10000" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
</svg> 
</div> 

और मैं जावास्क्रिप्ट का उपयोग करते हुए पथ तत्वों को जोड़ने कर रहा हूँ गतिशील/jQuery:

var shape = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
$(shape).attr({"d":"...", 
       "fill":"none", 
       "stroke":color, 
       "stroke-width":"1"}); 
$("svg").append(shape); 

मैं पथ के d विशेषता के लिए मूल्य बाहर छोड़ दिया के रूप में यह एक तरह से लंबी थी। इसके अलावा, color एक स्ट्रिंग चर है कि या तो "हरी", "लाल", या "काला" के रूप में पहले से निर्धारित होता है।

वहाँ कुछ मेरी कोड है कि इस कारण या यह एक अलग मुद्दा है में गलत है?

Answer 1

यह शायद विरोधी aliasing सबसे एसवीजी कार्यान्वयन में लागू की वजह से है। जब रेखा की चौड़ाई 1 के करीब या नीचे जाती है, तो एंटीअलाइजिंग इसे बनाता है ताकि आधा कवर पिक्सेल आंशिक रूप से अपारदर्शी हो। डिफ़ॉल्ट रूपांतरण और जगह में व्यूपोर्ट के साथ, अपने एक-पिक्सेल लाइन शायद ठीक दो भौतिक पिक्सल के बीच की सीमा पर बैठता है, ताकि वे एक आधा कवर कर रहे हैं, एक समग्र 50% पारदर्शिता के लिए अग्रणी। एक सफेद पृष्ठभूमि पर एक काला रेखा के साथ, यह 50% ग्रे पैदा करता है।

Answer 2

लाइनों सीधे क्षैतिज या लम्बवत बस, आधे से एक पिक्सेल बंद पर लाइनों जगह x="1.5px" की तरह कर रहे हैं।

एक और तरीका है लाइनों के लिए कुछ सीएसएस लागू करने के लिए है:

.thelines{ 
    shape-rendering:crispEdges 
} 

The spec chapter on shape-rendering property.

Answer 3

शायद एक छोटे से देर से, लेकिन इस के लिए असली कारण है कि जब आप एक ग्रिड लाइन है, जिस पर आकर्षित है अनंत छोटे स्ट्रोक-चौड़ाई 1 के साथ लाइन (या/नीचे से ऊपर) ग्रिड लाइन से एक आधा पिक्सेल छोड़ दिया और सही के रूप में प्रदान की गई है। मैंने 0.5,0.5 को बदलने के साथ सभी ऑब्जेक्ट्स के चारों ओर एक समूह जोड़कर इसे हल किया ताकि सब कुछ आधे ग्रिड लाइन को स्थानांतरित कर दिया जा सके।

तो सब कुछ आप आकर्षित अब ठीक 2 ग्रिड लाइनों के बीच बीच में है। स्ट्रोक की चौड़ाई 1 Wil के साथ एक लाइन है अब छोड़ दिया और बाईं ओर आधे से एक पिक्सेल, लेकिन बीच में से दोनों को आधा पिक्सेल। वास्तव में मोटाई आप चाहते थे के साथ एक पंक्ति में जिसके परिणामस्वरूप: 1 पिक्सेल ...

उदाहरण:

<g transform="translate(0.5,0.5)"> 
<g> 
    <path /> 
    <path /> 
</g> 
<g> 
    <path /> 
    <path /> 
</g> 
</g> 

Answer 4

जवाब user616586 से ठीक लग रहा है।

समस्या मैं देख

कि लाइनों आकार के केंद्र से समान दूरी की जरूरत नहीं है क्योंकि उनमें से एक 1 पिक्सल की भरपाई कर रहा है। अधिकांश स्थितियों में शायद स्वीकार्य thats, लेकिन कभी कभी ऐसा नहीं है।

एक अन्य विकल्प:

• 2px की एक स्ट्रोक-चौड़ाई का उपयोग करें (होने 1px बाहर प्रदान की गई और 1px आकार के भीतर प्रस्तुत किये)
• एक क्लिप-पथ के रूप में खुद को आकार लागू (प्रतिपादन को हटा बाहरी 1px) की

Answer 5

ठीक:

<line 
    x1="10" y1="1" 
    x2="90" y2="1.0001" // hack: horizontal line in SVG not visible in Chrome 
    stroke="#FF0000" 
    strokeWidth="1"/> 

रेफरी: http://code.tonytuan.org/2016/09/svg-horizontal-line-not-visible-in.html

Answer 6

तो इसकी D3js फिर अपने d3 तत्व को शैली विशेषता नीचे जोड़ने का प्रयास करें:

.style('shape-rendering','crispEdges') 

इस लाइन पतली बनाता है।

आप, सीएसएस के साथ एक ही प्राप्त करने के लिए फिर नीचे दिए गए शैली को जोड़ने चाहते हैं:

.the_Line_CLass{ 
    shape-rendering: crispEdges; 
}