0

下面的代码在 IE 中运行良好。但箭头标记在 chrome 中向左定向。

确切的问题是什么。请问，谁能告诉我。?

 <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

这是相应的 jsfiddle。

4

1 回答 1

0

您的第二行是使用“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) 会疯狂猜测指向右箭头。

有两种解决方案。一种是您可以简单地将curveTo 点从尖端移开，这样曲线和尖端之间就会有一点空间，因此它的走向不会有歧义。

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

于 2013-10-14T21:17:38.033 回答