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.
Geir
Top achievements
Rank 1
Geir asked on 29 Mar 2021, 03:12 PM

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>

 

 

 

 

2 Answers, 1 is accepted

Sort by
0
Geir
Top achievements
Rank 1
answered on 29 Mar 2021, 03:14 PM
PS! forgot to add the end </svg> tag to the code above....
0
Neli
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.

Regards,
Neli
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.

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