Question

我试图使用标记在其一端创建一个带有小三角形的SVG线。但是，此代码不起作用。标记没有显示出来。这是我第一次尝试使用svg，但代码似乎没有任何错误......它有什么问题吗？提前谢谢。

<svg id="rep-svg-13" class="rep-svg" style="position: absolute; left: -82px; top: -269px; display: block; opacity: 1;" width="35.6534886317" height="87.101405277" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>

<marker id="myMarker-13" viewBox="0 0 10 10" refX="1" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto">
<polygon points="0,0 10,5 0,10" style="fill:rgb(100, 100, 100);"></polygon>
</marker>

</defs>

<line id="rep-arrow-13" x1="5.20716619357648" y1="-10.545316845143645" x2="30.44632243812352" y2="97.64672212214364" stroke="#ff0000" stroke-width="7" marker-end="url(#myMarker-13)"></line>

</svg>

Answer 1

你的线和箭就在那里。他们只是不可见。你的位置坐标将它从屏幕上拉出来：

left: -82px; top: -269px;

请参阅 JSFiddle 。

我将left和top值替换为正值，更改了SVG的大小并添加了边框以显示其限制，现在您可以看到箭头。

SVG Marker无法显示

1 个答案: