This is a migrated thread and some comments may be shown as answers.

SVG images does not render marker-end correct

2 Answers 26 Views
Report Designer (standalone)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Geir asked on 29 Mar 2021, 03:12 PM


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">
            <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>
           <pattern id="wallFill" width="4" height="10" fill="#E6E6E6" patternTransform="rotate(45 0 0)"
               <line x1="0" y1="0" x2="0" y2="10" style="stroke:#ABABAB; stroke-width:1"></line>
       <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 fill="black" font-size="12px" dominant-baseline="middle" transform="translate(140,40) rotate(27)"
       <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>





2 Answers, 1 is accepted

Sort by
Top achievements
Rank 1
answered on 29 Mar 2021, 03:14 PM
PS! forgot to add the end </svg> tag to the code above....
Telerik team
answered on 01 Apr 2021, 11:40 AM

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.

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Report Designer (standalone)
Asked by
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Telerik team
Share this question