एसवीजी मार्कर IE9-10

Question

में काम नहीं करता है svg पर पहली बार काम करना। मैं एक 'तीर की तरह' पथ के लिए svg परिभाषा निम्नलिखित है

<defs> 
    <marker id="start" refX="1" refY="5" markerUnits="userSpaceOnUse" markerWidth="17" markerHeight="11" orient="auto"> 
     <path id="conditional" d="M 0 6 L 8 1 L 15 5 L 8 9 L 1 5" fill="white" stroke="black" stroke-width="1" /> 
     <path id="default" d="M 5 0 L 11 10" fill="white" stroke="black" stroke-width="1" /> 
    </marker> 
    <marker id="end" refX="15" refY="6" markerUnits="userSpaceOnUse" markerWidth="15" markerHeight="12" orient="auto"> 
     <path id="arrowhead" d="M 0 1 L 15 6 L 0 11z" fill="black" stroke="black" stroke-linejoin="round" stroke-width="2" /> 
    </marker> 
</defs> 
<g id="edge"> 
    <path id="bg_frame" d="M10 50 L210 50" stroke="black" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" marker-start="url(#start)" marker-end="url(#end)" /> 
    <text id="text_name" x="0" y="0" oryx:edgePosition="startTop"/> 
</g> 

लेकिन यह आईई 9 या IE में पथ के अंत में तीर प्रदर्शित नहीं करता है 10

करता है 'त्रिकोण' IE में समर्थित नहीं या कोड में समस्या?

यहाँ एक उदाहरण है, http://www.w3.org/TR/SVG11/images/painting/marker.svg भी IE में काम नहीं करता।

मदद करें, तो वह केवल बिंदु मेरी कार्यप्रवाह संपादक अटक गया है।

लिंक परिणाम

एफएफ में मेरे कोड का परिणाम है:

और कोड IE में परिणाम है (वहाँ कोई तीर, तीर के अंत में कोई वर्ग है):

Answer 1

यह मेरे लिए आईई 10 में ठीक प्रस्तुत करने के लिए दिखाई दिया (बाईं ओर हीरा आकार और दाईं ओर त्रिकोण)।

हालांकि IE में मार्करों के साथ कुछ ज्ञात समस्याएं हैं। उदाहरण के लिए, आईई markerUnits = "स्ट्रोकविड्थ" का समर्थन नहीं करता है।

Answer 2

मुझे मार्करों के साथ गतिशील रूप से लाइनों को स्थानांतरित करने में समस्याएं आई हैं। वे पेजेलोड पर ठीक दिखते हैं, लेकिन लाइनों x/y विशेषताओं को बदलते समय स्थानांतरित नहीं होते हैं।

http://social.msdn.microsoft.com/Forums/ie/en-US/f772aab3-5ce3-4367-8eec-4fe58ad94b14/urgent-serious-bug-svg-marker-is-not-updating-when-changing-the-lines-xy-in-ie10?forum=iewebdevelopment

http://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does-not-update

Answer 3

समस्या पहले से ही माइक्रोसॉफ्ट की सूचना है के रूप में xdhmoore अपने जवाब में लिखा है: http://jsfiddle.net/EEYZZ/

//if (isIE10 || isIE11) { 
     var parent = p1.parentNode; 
     parent.removeChild(p1); 
     parent.appendChild(p1); 
    //} 

: https://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does-not-update

एक बेला जहां समस्या दिखाया गया है नहीं है

मेरा कामकाज डीओएम से नोड को मैन्युअल रूप से निकालना है और इसे फिर से जोड़ना है, यह नोड को वांछित के रूप में अपडेट करेगा ... प्रदर्शन और सामान के बारे में बात न करें, लेकिन मुझे लगता है कि वर्तमान में ऐसा करने का कोई बेहतर तरीका नहीं है। (http://jsfiddle.net/kaljak/5zTv9/3/)

Answer 4

मुझे एक ही समस्या का सामना करना पड़ रहा था और यह मुझे काफी सिरदर्द पैदा कर रहा था - मैं वास्तव में समझ नहीं पा रहा हूं कि माइक्रोसॉफ्ट इसे ठीक क्यों नहीं करता है। मैंने मार्करों को कस्टम पथों से प्रतिस्थापित करने का निर्णय लिया जिनके पास अच्छा दुष्प्रभाव है जो आप कर सकते हैं उदा। जावास्क्रिप्ट का उपयोग कर रनटाइम पर भरें या रंग बदलें।

मैं, धार वर्ग 'किनारे-पथ' है और टिप वर्ग 'बढ़त की नोक' है d3 उपयोग करते हुए मेरे svg पैदा करते हैं। दोनों पथ एक svg के बच्चे हैं: जी। किनारे स्वयं एक स्पलीन है, इसलिए टिप घूर्णन करने के लिए मैं पिछले 10 पिक्सल की ढलान लेता हूं।यह काफी कोड जो तीर अद्यतन करने के लिए इस्तेमाल किया जाता है, IE9-11 में काम करता है:

edge.select('path.edge-tip') 
    // the shape of the tip 
    .attr('d', 'M0,0L10,5L0,10Z') 
    // move the tip to the end of the edge and rotate. 
    .attr('transform', function(d) { 
     var parent = d3.select(this).node().parentNode, 
      path = d3.select(parent).select('path.edge-path').node(), 
      pathLength = path.getTotalLength(), 
      point1 = path.getPointAtLength(Math.max(0, pathLength - 10)), 
      point2 = path.getPointAtLength(pathLength), 
      vect = { x: point2.x - point1.x, y: point2.y - point1.y } 
      l1 = vect.x * vect.x + vect.y * vect.y; 
     l1 = Math.sqrt(l1); 
     var angle = Math.acos(vect.x/l1); 
     angle = 360 * (angle/(2*Math.PI)); 
     if (vect.y < 0) { 
      angle = 360 - angle; 
     } 
     return 'translate(' + point1.x + ',' + (point1.y - 5) + ') rotate (' + angle +' 0 5)'; 
    }); 

शायद यह मदद करता है किसी को :)

Answer 5

तत्व के चारों ओर एक और समूह बिछाना और मार्कर इस समूह के भीतर परिभाषित करने एमएस एज और अन्य में काम करता है।

 <g id="maszlinie" style="marker-start: url(#pf2); marker-end: url(#pf)"> 
    <g id="bline" transform="translate(0,-20)"> 
     <line class="masz" y2="365" y1="365" x2="415" x1="15"> 
    </g> 
    </g> 

Answer 6

मैं आईई 11 में काम करने के लिए मार्कर नहीं मिला, लेकिन एज में वे काम करते हैं। चाल इनलाइन एसवीजी के लिए है, आपको की बजाय मार्करों के लिए xml:id का उपयोग करने की आवश्यकता है।

संपादित करें: वास्तव में anything:id काम करता है। यकीन नहीं है कि क्यों।

संपादित करें 2: उह। यह क्रोम में एसवीजी तोड़ता है। आप आईडी को डुप्लिकेट कर सकते हैं: id="foo" edge_sucks:id="foo"।

संपादित करें 3: हम्म स्क्रैच कि यह सब के बाद एज में काम करता प्रतीत होता है। पता नहीं क्या चल रहा है। IE में

Answer 7

एक समस्या यह है कि विरासत stroke, stroke-width और fill गुण (मानकों के विपरीत) लगता है।

हालांकि, यह स्ट्रोक गुणों को स्पष्ट रूप से सेट करके चारों ओर काम किया जा सकता है।

http://www.w3.org/TR/SVG11/images/painting/marker.svg

के साथ समस्या पर विचार करें मार्कर की स्थापना करके stroke="none" और fill="black" प्रतिपादन ठीक लग रहा है:

https://codepen.io/anon/pen/qmYzGE

नोट: मैं केवल IE11 में यह परीक्षण किया है। मेरा अनुमान है कि यह कम से कम आईई 10 में भी काम करेगा। इस स्वागत पर कोई जानकारी।