SVG images does not render marker-end correct

[Geir]

Hello.

when trying to display this SVG in a picturebox the marker-end shows up with some added artifacts.

Also when using polygon as marker, nothing shows up. Just the artifacts.

<svg viewBox="0 0 240 200" id="drawing">
       <defs>
           <marker id="arrowheadSmall" markerWidth="13" markerHeight="13" fill="black" refX="7" refY="6" orient="auto">
               <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;"></path>
           </marker>
           <pattern id="wallFill" width="4" height="10" fill="#E6E6E6" patternTransform="rotate(45 0 0)"
               patternUnits="userSpaceOnUse">
               <line x1="0" y1="0" x2="0" y2="10" style="stroke:#ABABAB; stroke-width:1"></line>
           </pattern>
       </defs>
       <rect x="10" y="90" width="90" height="10" style="stroke:grey;stroke-width:1" fill="url(#wallFill)"></rect>
       <rect x="10" y="180" width="180" height="10" style="stroke:grey;stroke-width:1" fill="url(#wallFill)"></rect>
       <line x1="190" y1="190" x2="190" y2="70" style="stroke:grey;stroke-width:1"></line>
       <line x1="190" y1="70" x2="70" y2="10" style="stroke:grey;stroke-width:1"></line>
       <text fill="black" font-size="12px" dominant-baseline="middle" transform="translate(90,186)"
           text-anchor="middle">Gulv</text>
      <text fill="black" font-size="12px" dominant-baseline="middle" transform="translate(140,40) rotate(27)"
           text-anchor="middle">Skråtak</text>
       <line x1="200" y1="118" x2="200" y2="73" style="stroke:black" marker-end="url(#arrowheadSmall)"></line>
       <line x1="200" y1="130" x2="200" y2="177" style="stroke:black" marker-end="url(#arrowheadSmall)"></line>
       <line x1="100" y1="62" x2="100" y2="87" style="stroke:black" marker-end="url(#arrowheadSmall)"></line>
       <line x1="100" y1="48" x2="100" y2="28" style="stroke:black" marker-end="url(#arrowheadSmall)"></line>
    <text x="40" y="140" fill="black" font-size="12px" dominant-baseline="middle" text-anchor="middle">2380</text>

       <line x1="40" y1="133" x2="40" y2="103" style="stroke:black" marker-end="url(#arrowheadSmall)"></line>
       <line x1="40" y1="145" x2="40" y2="177" style="stroke:black" marker-end="url(#arrowheadSmall)"></line>
       <text x="110" y="140" fill="black" font-size="12px" dominant-baseline="middle" text-anchor="middle">2690</text>
       <line x1="110" y1="133" x2="110" y2="93" style="stroke:black" marker-end="url(#arrowheadSmall)"></line>
       <line x1="110" y1="145" x2="110" y2="177" style="stroke:black" marker-end="url(#arrowheadSmall)"></line>
      <text x="100" y="56" fill="black" font-size="12px" dominant-baseline="middle" text-anchor="middle">1940</text>
       <text x="200" y="125" fill="black" font-size="12px" dominant-baseline="middle" text-anchor="middle">3080</text>
       <line x1="150" x2="220" y1="70" y2="70" stroke="#2A579A" stroke-width="1" stroke-dasharray="4"></line>
       <path fill="none" stroke="#2A579A" stroke-width="1"
           d="M 177.3116909814869 64.08334433563022 A 14 14 0 0 0 176 70"></path>
       <text fill="#2A579A" font-size="12px" dominant-baseline="middle" transform="translate(162, 65)" text-anchor="middle">23 ° </text>

[Geir]

PS! forgot to add the end </svg> tag to the code above....

[Neli]

Hi Geir,

Thank you for the provided SVG.

I was able to reproduce the problem and I logged it as a bug in our system- SVG is not rendered correctly. As a token of gratitude, I updated your Telerik points. If we find a workaround, we will share it in this thread. Let us know if you have any questions.

Regards,
Neli
Progress Telerik