CODEWITHSUNDEEP
htmlsvg
Miguelmmm
Miguelmmm

Reputation: 23

SVG Marker not displaying

I'm trying to make an SVG line with a little triangle in one end of it, using markers. This code, however, doesn't work. The marker doesn't show up. It's the first time I'm experimenting with svg, but the code doesn't seem to have any mistake... Is something wrong with it? Thanks in advance.

<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>

Upvotes: 1

Views: 1738

Answers (1)

helderdarocha
helderdarocha

Reputation: 23637

Your line and arrow are there. They just aren't visible. Your position coordinates are drawing it off the screen:

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

See this JSFiddle.

I replace the left and top values with positive values, changed the SVG's size and added a border to expose its the limits, and now you can see the arrow.

Upvotes: 1

Related Questions