究竟是什么问题。请问，谁能告诉我。？

 <html>
 <body>
 <svg viewBox="0 0 1000 1000">
 <defs>
   <marker id = "EndMarker" viewBox = "0 0 10 10" refX = "5" refY = "5" 
 markerWidth ="3" markerHeight = "3" stroke = "green" stroke-width = "1" fill = "none" 
 orient = "auto">
        <polyline fill="black" stroke="black" points="0,0 10,5 0,10 0,0"/>          
</marker>
<marker id="line10_Tail" viewBox="0 0 10 10" refX="5" refY="5" `markerWidth="3"
markerHeight="3" stroke-width = "1" orient="auto">
<polyline fill="black" stroke="black" points="0,0 10,5 0,10 0,0"/>
</marker>
</defs>
<polyline points="300,100 300,200 200,200 100,200 100,100 150,100" fill = "none" 
stroke= "black" stroke-width = "5"  marker-end = "url(#EndMarker)"/>
<path fill="none" marker-end="url(#line10_Tail)" stroke="black" stroke-width="5"  
d="M500,445 S450,445,250,444 S1,443 1,443"/>
<polyline fill="black" stroke="black" points="0,0 10,5 0,10 0,0"/>
 </svg>
</body>
</html

这是corresponding jsfiddle。

Answer 1

你的第二行是使用“Shorthand Smooth Cubic Bezier CurveTo”，它显示为首都S，后跟两个X,Y坐标。

d="M 500,445  S 450,445,250,444  S 10,443 10,443"

您遇到的是数学问题。你已经建立了一条从空间A点开始的线，曲线到点B，并在空间C的最后一点结束，对吗？您提供给B和C的坐标是相同的。当线条弯曲到B然后预计会绕回到B点时，一个浏览器（IE）可能需要一个疯狂的猜测指向左箭头而另一个浏览器（Chrome）占用了疯狂的猜测指向右箭头。

有两种解决方案。一个是你可以简单地将曲线点从尖端移开，这样曲线和尖端之间就有一点空间，所以对于它的走向没有任何模糊性。

d="M 500,445  S 450,445,250,444  S 11,443 10,443"

更好的是，由于这些线是笔直的，你可以使用直线手柄。

d="M 500,445  L 250,444  L 10,443"

阅读有关W3C路径数据规范的更多信息：http://www.w3.org/TR/SVG11/paths.html#PathData

SVG标记结束为chrome中的路径

究竟是什么问题。请问，谁能告诉我。？

1 个答案:

SVG标记结束为chrome中的路径

究竟是什么问题。请问，谁能告诉我。 ？

1 个答案:

究竟是什么问题。请问，谁能告诉我。？