Question

I have written the following code to display a triangle at the end of polyline and an image at the start of that.
Running this svg it just shows the triangle at the end but the image is not being displayed.
What am i missing here…

 <svg width="120" height="120" viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg" version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
<marker id="Image"
            viewBox="0 0 10 10" 
            refX="5" refY="5"
            markerWidth="6" 
            markerHeight="6"
            orient="auto">
        <path d="M 0 0 L 10 10 L 10 0 L 0 0 z" />
    </marker>
</defs>

<polyline points="10,90 50,80 90,20"
          fill="none" stroke="black" 
          stroke-width="2"
          marker-end="url(#Triangle)" marker-start="url(#Image)"/>



</svg>

Answer 1

There is no marker with the id Triangle, so it isn’t showing that. It is therefore only showing the Image marker (which happens to be a triangle).