Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Canvas is not rendering nested svg

See original GitHub issue

I 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.

Screen Shot 2020-02-19 at 3 13 38 PM

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:closed
  • Created 4 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
dangreencommented, Mar 24, 2020

@thitemple canvg@3.0.6 was released

1reaction
dangreencommented, Mar 20, 2020

@thitemple Sorry, will look it tomorrow.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Can't resolve 'process/browser'

Next page

3.0.0: RenderContext2D type is lost through babel