Canvas is not rendering nested svg
See original GitHub issueI have this SVG:
<svg class="rv-xy-plot__inner" width="911" height="300">
<style> .rv-xy-plot__axis__tick__text { font-family: Helvetica Neue; font-size: 13px; color: #333e48; fill: #333e48; } .rv-xy-plot__grid-lines__line { stroke: #333e48; stroke-width: 1px; opacity: .16; } .rv-xy-plot { color: #c3c3c3; position: relative; } .rv-xy-plot__inner { display: block; } .rv-xy-plot__axis__tick__line { stroke: #6b787f; stroke-width: 1px; } .wds-chart__axis-title { font-family: Helvetica Neue; text-anchor: middle; font-weight: 500; font-size: 14px } .rv-xy-plot__series--line { fill: none; } .wds-chart__axis-line .rv-xy-plot__axis__line { stroke: #6b787f; stroke-width: 1px; } </style>
<g transform="translate(125,248)" class="rv-xy-plot__axis rv-xy-plot__axis--horizontal ">
<g transform="translate(0, 0)" class="rv-xy-plot__axis__ticks">
<g transform="translate(0, 0)" class="rv-xy-plot__axis__tick">
<line x1="0" x2="0" y1="0" y2="0" class="rv-xy-plot__axis__tick__line"></line>
<text text-anchor="middle" dy="0.72em" transform="translate(0, 8)" class="rv-xy-plot__axis__tick__text">0</text>
</g>
<g transform="translate(153.5, 0)" class="rv-xy-plot__axis__tick">
<line x1="0" x2="0" y1="0" y2="0" class="rv-xy-plot__axis__tick__line"></line>
<text text-anchor="middle" dy="0.72em" transform="translate(0, 8)" class="rv-xy-plot__axis__tick__text">20</text>
</g>
<g transform="translate(307, 0)" class="rv-xy-plot__axis__tick">
<line x1="0" x2="0" y1="0" y2="0" class="rv-xy-plot__axis__tick__line"></line>
<text text-anchor="middle" dy="0.72em" transform="translate(0, 8)" class="rv-xy-plot__axis__tick__text">40</text>
</g>
<g transform="translate(460.5, 0)" class="rv-xy-plot__axis__tick">
<line x1="0" x2="0" y1="0" y2="0" class="rv-xy-plot__axis__tick__line"></line>
<text text-anchor="middle" dy="0.72em" transform="translate(0, 8)" class="rv-xy-plot__axis__tick__text">60</text>
</g>
<g transform="translate(614, 0)" class="rv-xy-plot__axis__tick">
<line x1="0" x2="0" y1="0" y2="0" class="rv-xy-plot__axis__tick__line"></line>
<text text-anchor="middle" dy="0.72em" transform="translate(0, 8)" class="rv-xy-plot__axis__tick__text">80</text>
</g>
<g transform="translate(767.5, 0)" class="rv-xy-plot__axis__tick">
<line x1="0" x2="0" y1="0" y2="0" class="rv-xy-plot__axis__tick__line"></line>
<text text-anchor="middle" dy="0.72em" transform="translate(0, 8)" class="rv-xy-plot__axis__tick__text">100</text>
</g>
</g>
</g>
<g transform="translate(508.75, 237.6)" class="rv-xy-plot__axis__title wds-chart__axis-title alt-x-label">
<text transform="translate(0, 60)">Top 2 Box score %</text>
</g>
<g transform="translate(0,8)" class="rv-xy-plot__axis rv-xy-plot__axis--vertical wds-chart__axis-line">
<line x1="125" x2="125" y1="0" y2="240" class="rv-xy-plot__axis__line"></line>
</g>
<g transform="translate(0,8)" class="rv-xy-plot__axis rv-xy-plot__axis--vertical ">
<g transform="translate(125, 0)" class="rv-xy-plot__axis__ticks">
<g transform="translate(0, 210)" class="rv-xy-plot__axis__tick">
<line y1="0" y2="0" x1="0" x2="0" class="rv-xy-plot__axis__tick__line"></line>
<text text-anchor="end" dy="0.32em" transform="translate(-8, 0)" class="rv-xy-plot__axis__tick__text">Overall appeal</text>
</g>
<g transform="translate(0, 150)" class="rv-xy-plot__axis__tick">
<line y1="0" y2="0" x1="0" x2="0" class="rv-xy-plot__axis__tick__line"></line>
<text text-anchor="end" dy="0.32em" transform="translate(-8, 0)" class="rv-xy-plot__axis__tick__text">Unique</text>
</g>
<g transform="translate(0, 90)" class="rv-xy-plot__axis__tick">
<line y1="0" y2="0" x1="0" x2="0" class="rv-xy-plot__axis__tick__line"></line>
<text text-anchor="end" dy="0.32em" transform="translate(-8, 0)" class="rv-xy-plot__axis__tick__text">Believable</text>
</g>
<g transform="translate(0, 30)" class="rv-xy-plot__axis__tick">
<line y1="0" y2="0" x1="0" x2="0" class="rv-xy-plot__axis__tick__line"></line>
<text text-anchor="end" dy="0.32em" transform="translate(-8, 0)" class="rv-xy-plot__axis__tick__text">Persuasive</text>
</g>
</g>
</g>
<g transform="translate(125,8)" class="rv-xy-plot__grid-lines">
<line y1="210" y2="210" x1="0" x2="767.5" class="rv-xy-plot__grid-lines__line"></line>
<line y1="150" y2="150" x1="0" x2="767.5" class="rv-xy-plot__grid-lines__line"></line>
<line y1="90" y2="90" x1="0" x2="767.5" class="rv-xy-plot__grid-lines__line"></line>
<line y1="30" y2="30" x1="0" x2="767.5" class="rv-xy-plot__grid-lines__line"></line>
</g>
<g transform="translate(125,8)" class="rv-xy-plot__grid-lines">
<line x1="0" x2="0" y1="0" y2="240" class="rv-xy-plot__grid-lines__line"></line>
<line x1="153.5" x2="153.5" y1="0" y2="240" class="rv-xy-plot__grid-lines__line"></line>
<line x1="307" x2="307" y1="0" y2="240" class="rv-xy-plot__grid-lines__line"></line>
<line x1="460.5" x2="460.5" y1="0" y2="240" class="rv-xy-plot__grid-lines__line"></line>
<line x1="614" x2="614" y1="0" y2="240" class="rv-xy-plot__grid-lines__line"></line>
<line x1="767.5" x2="767.5" y1="0" y2="240" class="rv-xy-plot__grid-lines__line"></line>
</g>
<path d="M243.2513661202186,210L367.8341013824884,210" class="rv-xy-plot__series rv-xy-plot__series--line " transform="translate(125,8)" style="opacity: 1; stroke-width: 1px; stroke: rgb(107, 120, 127);"></path>
<path d="M91.9585253456221,150L356.4890710382514,150" class="rv-xy-plot__series rv-xy-plot__series--line " transform="translate(125,8)" style="opacity: 1; stroke-width: 1px; stroke: rgb(107, 120, 127);"></path>
<path d="M314.54918032786884,90L417.35023041474653,90" class="rv-xy-plot__series rv-xy-plot__series--line " transform="translate(125,8)" style="opacity: 1; stroke-width: 1px; stroke: rgb(107, 120, 127);"></path>
<path d="M176.14754098360655,30L336.00230414746545,30" class="rv-xy-plot__series rv-xy-plot__series--line " transform="translate(125,8)" style="opacity: 1; stroke-width: 1px; stroke: rgb(107, 120, 127);"></path>
<g class="rv-xy-plot__series rv-xy-plot__series--custom-svg-wrapper " transform="translate(125,8)">
<g class="rv-xy-plot__series--custom-svg" transform="translate(243.2513661202186,210)">
<svg data-testid="StatMark" height="14" viewBox="-10 0 20 14" width="20" x="-10" y="-4">
<rect fill="transparent" x="-10" y="0" width="20" height="14"></rect>
<line stroke="#6B787F" style="stroke-width: 2px;" x1="0" x2="0" y1="0" y2="14"></line>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(367.8341013824884,210)">
<svg data-testid="StatMark" height="14" viewBox="-10 0 20 14" width="20" x="-10" y="-4">
<rect fill="transparent" x="-10" y="0" width="20" height="14"></rect>
<line stroke="#6B787F" style="stroke-width: 2px;" x1="0" x2="0" y1="0" y2="14"></line>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(305.5427337513535,210)">
<svg data-testid="StatMark" height="14" viewBox="-10 0 20 14" width="20" x="-10" y="-4">
<rect fill="transparent" x="-10" y="0" width="20" height="14"></rect>
<line stroke="#FF8B4F" style="stroke-dasharray: 2px; stroke-width: 2px;" x1="0" x2="0" y1="0" y2="14"></line>
</svg>
</g>
</g>
<g class="rv-xy-plot__series rv-xy-plot__series--custom-svg-wrapper " transform="translate(125,8)">
<g class="rv-xy-plot__series--custom-svg" transform="translate(91.9585253456221,150)">
<svg data-testid="StatMark" height="14" viewBox="-10 0 20 14" width="20" x="-10" y="-4">
<rect fill="transparent" x="-10" y="0" width="20" height="14"></rect>
<line stroke="#6B787F" style="stroke-width: 2px;" x1="0" x2="0" y1="0" y2="14"></line>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(356.4890710382514,150)">
<svg data-testid="StatMark" height="14" viewBox="-10 0 20 14" width="20" x="-10" y="-4">
<rect fill="transparent" x="-10" y="0" width="20" height="14"></rect>
<line stroke="#6B787F" style="stroke-width: 2px;" x1="0" x2="0" y1="0" y2="14"></line>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(224.22379819193674,150)">
<svg data-testid="StatMark" height="14" viewBox="-10 0 20 14" width="20" x="-10" y="-4">
<rect fill="transparent" x="-10" y="0" width="20" height="14"></rect>
<line stroke="#FF8B4F" style="stroke-dasharray: 2px; stroke-width: 2px;" x1="0" x2="0" y1="0" y2="14"></line>
</svg>
</g>
</g>
<g class="rv-xy-plot__series rv-xy-plot__series--custom-svg-wrapper " transform="translate(125,8)">
<g class="rv-xy-plot__series--custom-svg" transform="translate(314.54918032786884,90)">
<svg data-testid="StatMark" height="14" viewBox="-10 0 20 14" width="20" x="-10" y="-4">
<rect fill="transparent" x="-10" y="0" width="20" height="14"></rect>
<line stroke="#6B787F" style="stroke-width: 2px;" x1="0" x2="0" y1="0" y2="14"></line>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(417.35023041474653,90)">
<svg data-testid="StatMark" height="14" viewBox="-10 0 20 14" width="20" x="-10" y="-4">
<rect fill="transparent" x="-10" y="0" width="20" height="14"></rect>
<line stroke="#6B787F" style="stroke-width: 2px;" x1="0" x2="0" y1="0" y2="14"></line>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(365.9497053713077,90)">
<svg data-testid="StatMark" height="14" viewBox="-10 0 20 14" width="20" x="-10" y="-4">
<rect fill="transparent" x="-10" y="0" width="20" height="14"></rect>
<line stroke="#FF8B4F" style="stroke-dasharray: 2px; stroke-width: 2px;" x1="0" x2="0" y1="0" y2="14"></line>
</svg>
</g>
</g>
<g class="rv-xy-plot__series rv-xy-plot__series--custom-svg-wrapper " transform="translate(125,8)">
<g class="rv-xy-plot__series--custom-svg" transform="translate(176.14754098360655,30)">
<svg data-testid="StatMark" height="14" viewBox="-10 0 20 14" width="20" x="-10" y="-4">
<rect fill="transparent" x="-10" y="0" width="20" height="14"></rect>
<line stroke="#6B787F" style="stroke-width: 2px;" x1="0" x2="0" y1="0" y2="14"></line>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(336.00230414746545,30)">
<svg data-testid="StatMark" height="14" viewBox="-10 0 20 14" width="20" x="-10" y="-4">
<rect fill="transparent" x="-10" y="0" width="20" height="14"></rect>
<line stroke="#6B787F" style="stroke-width: 2px;" x1="0" x2="0" y1="0" y2="14"></line>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(256.074922565536,30)">
<svg data-testid="StatMark" height="14" viewBox="-10 0 20 14" width="20" x="-10" y="-4">
<rect fill="transparent" x="-10" y="0" width="20" height="14"></rect>
<line stroke="#FF8B4F" style="stroke-dasharray: 2px; stroke-width: 2px;" x1="0" x2="0" y1="0" y2="14"></line>
</svg>
</g>
</g>
<g class="rv-xy-plot__series rv-xy-plot__series--custom-svg-wrapper " transform="translate(125,8)">
<g class="rv-xy-plot__series--custom-svg" transform="translate(243.2513661202186,210)">
<svg data-testid="PinMark" height="24" viewBox="0 0 14 19" width="18" x="-9" y="-24">
<path d="M1.117 10.99l.035.051.133.199 5.067 7.415c.148.216.39.345.649.345a.787.787 0 00.65-.345l5.055-7.41c.048-.069.095-.136.142-.198l.03-.047c1.893-2.982 1.343-6.927-1.29-9.255a6.904 6.904 0 00-9.176 0C-.221 4.073-.771 8.018 1.122 11l-.005-.01zm5.884-6.827c1.61 0 2.917 1.33 2.917 2.971 0 1.64-1.306 2.97-2.917 2.97-1.61 0-2.917-1.33-2.917-2.97 0-1.64 1.306-2.97 2.917-2.97z" fill="rgba(97, 137, 189, 0.85)" fill-rule="nonzero"></path>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(356.4890710382514,150)">
<svg data-testid="PinMark" height="24" viewBox="0 0 14 19" width="18" x="-9" y="-24">
<path d="M1.117 10.99l.035.051.133.199 5.067 7.415c.148.216.39.345.649.345a.787.787 0 00.65-.345l5.055-7.41c.048-.069.095-.136.142-.198l.03-.047c1.893-2.982 1.343-6.927-1.29-9.255a6.904 6.904 0 00-9.176 0C-.221 4.073-.771 8.018 1.122 11l-.005-.01zm5.884-6.827c1.61 0 2.917 1.33 2.917 2.971 0 1.64-1.306 2.97-2.917 2.97-1.61 0-2.917-1.33-2.917-2.97 0-1.64 1.306-2.97 2.917-2.97z" fill="rgba(97, 137, 189, 0.85)" fill-rule="nonzero"></path>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(314.54918032786884,90)">
<svg data-testid="PinMark" height="24" viewBox="0 0 14 19" width="18" x="-9" y="-24">
<path d="M1.117 10.99l.035.051.133.199 5.067 7.415c.148.216.39.345.649.345a.787.787 0 00.65-.345l5.055-7.41c.048-.069.095-.136.142-.198l.03-.047c1.893-2.982 1.343-6.927-1.29-9.255a6.904 6.904 0 00-9.176 0C-.221 4.073-.771 8.018 1.122 11l-.005-.01zm5.884-6.827c1.61 0 2.917 1.33 2.917 2.971 0 1.64-1.306 2.97-2.917 2.97-1.61 0-2.917-1.33-2.917-2.97 0-1.64 1.306-2.97 2.917-2.97z" fill="rgba(97, 137, 189, 0.85)" fill-rule="nonzero"></path>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(176.14754098360655,30)">
<svg data-testid="PinMark" height="24" viewBox="0 0 14 19" width="18" x="-9" y="-24">
<path d="M1.117 10.99l.035.051.133.199 5.067 7.415c.148.216.39.345.649.345a.787.787 0 00.65-.345l5.055-7.41c.048-.069.095-.136.142-.198l.03-.047c1.893-2.982 1.343-6.927-1.29-9.255a6.904 6.904 0 00-9.176 0C-.221 4.073-.771 8.018 1.122 11l-.005-.01zm5.884-6.827c1.61 0 2.917 1.33 2.917 2.971 0 1.64-1.306 2.97-2.917 2.97-1.61 0-2.917-1.33-2.917-2.97 0-1.64 1.306-2.97 2.917-2.97z" fill="rgba(97, 137, 189, 0.85)" fill-rule="nonzero"></path>
</svg>
</g>
</g>
<g class="rv-xy-plot__series rv-xy-plot__series--custom-svg-wrapper " transform="translate(125,8)">
<g class="rv-xy-plot__series--custom-svg" transform="translate(367.8341013824884,210)">
<svg data-testid="PinMark" height="16" viewBox="0 0 14 19" width="12" x="-6" y="-16">
<path d="M1.117 10.99l.035.051.133.199 5.067 7.415c.148.216.39.345.649.345a.787.787 0 00.65-.345l5.055-7.41c.048-.069.095-.136.142-.198l.03-.047c1.893-2.982 1.343-6.927-1.29-9.255a6.904 6.904 0 00-9.176 0C-.221 4.073-.771 8.018 1.122 11l-.005-.01z" fill="rgba(107, 120, 127, 0.5)" fill-rule="nonzero"></path>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(91.9585253456221,150)">
<svg data-testid="PinMark" height="16" viewBox="0 0 14 19" width="12" x="-6" y="-16">
<path d="M1.117 10.99l.035.051.133.199 5.067 7.415c.148.216.39.345.649.345a.787.787 0 00.65-.345l5.055-7.41c.048-.069.095-.136.142-.198l.03-.047c1.893-2.982 1.343-6.927-1.29-9.255a6.904 6.904 0 00-9.176 0C-.221 4.073-.771 8.018 1.122 11l-.005-.01z" fill="rgba(107, 120, 127, 0.5)" fill-rule="nonzero"></path>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(417.35023041474653,90)">
<svg data-testid="PinMark" height="16" viewBox="0 0 14 19" width="12" x="-6" y="-16">
<path d="M1.117 10.99l.035.051.133.199 5.067 7.415c.148.216.39.345.649.345a.787.787 0 00.65-.345l5.055-7.41c.048-.069.095-.136.142-.198l.03-.047c1.893-2.982 1.343-6.927-1.29-9.255a6.904 6.904 0 00-9.176 0C-.221 4.073-.771 8.018 1.122 11l-.005-.01z" fill="rgba(107, 120, 127, 0.5)" fill-rule="nonzero"></path>
</svg>
</g>
<g class="rv-xy-plot__series--custom-svg" transform="translate(336.00230414746545,30)">
<svg data-testid="PinMark" height="16" viewBox="0 0 14 19" width="12" x="-6" y="-16">
<path d="M1.117 10.99l.035.051.133.199 5.067 7.415c.148.216.39.345.649.345a.787.787 0 00.65-.345l5.055-7.41c.048-.069.095-.136.142-.198l.03-.047c1.893-2.982 1.343-6.927-1.29-9.255a6.904 6.904 0 00-9.176 0C-.221 4.073-.771 8.018 1.122 11l-.005-.01z" fill="rgba(107, 120, 127, 0.5)" fill-rule="nonzero"></path>
</svg>
</g>
</g>
</svg>
That is not rendering the nested SVGs properly.
Look at the blue and gray shapes on the chart, those are the ones not working properly.
From the above sample, the elements are the ones with data-testid="PinMark"
and data-testid="StatMark"
.
Is there anything that can be done for that?
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (1 by maintainers)
Top Results From Across the Web
Canvas is not rendering nested svg which are rotated #977
I have this SVG: svg.txt That is not rendering the nested SVGs properly.
Read more >canvg nested and floated SVG element does not appear in ...
I'm having an issue with canvg. I can't get it to render a right-floated element. The trick I'm using to float elements on...
Read more >39059 – canvas drawImage does not render SVG with ...
I added a new test case where it waits for 100ms after onLoad() event to ensure the sub-resources are loaded/decoded before drawing the...
Read more >Understanding SVG Coordinate Systems and Transformations ...
You can use a nested SVG to group elements together and then position them inside the parent SVG. Now, you can also group...
Read more ><g> - SVG: Scalable Vector Graphics - MDN Web Docs - Mozilla
The <g> SVG element is a container used to group other SVG elements. Transformations applied to the <g> element are performed on its...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@thitemple canvg@3.0.6 was released
@thitemple Sorry, will look it tomorrow.