Skip to content

Support image in svg #859

@ducan-ne

Description

@ducan-ne

With this given svg file that contains a <image> element, @napi-rs/canvas currently render blank but it should be the image instead, not sure it's a bug or not yet implemented though

<svg width="800" height="400" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg"><mask id="satori_om-id"><rect x="0" y="0" width="800" height="400" fill="#fff"></rect></mask><rect x="0" y="0" width="800" height="400" fill="#fff"></rect><clipPath id="satori_cp-id-0"><rect x="363" y="-252" width="75" height="65"></rect></clipPath><mask id="satori_om-id-0"><rect x="363" y="-252" width="75" height="65" fill="#fff"></rect></mask><image x="363" y="-252" width="75" height="65" href="data:image/svg+xml;utf8,%3Csvg  fill=%22%23000%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%22NaN%22 height=%22null%22 viewBox=%220 0 75 65%22%3E%3Cpath d=%22M37.59.25l36.95 64H.64l36.95-64z%22%3E%3C/path%3E%3C/svg%3E" preserveAspectRatio="none" clip-path="url(#satori_cp-id-0)" mask="url(#satori_om-id-0)"></image><mask id="satori_om-id-0-0"><rect x="363" y="-252" width="0" height="65" fill="#fff"></rect></mask><clipPath id="satori_cp-id-1"><rect x="0" y="-187" width="800" height="800"></rect></clipPath><mask id="satori_om-id-1"><rect x="0" y="-187" width="800" height="800" fill="#fff"></rect></mask><image x="0" y="-187" width="800" height="800" href="https://wsrv.nl/?url=https://gist.github.com/ducan-ne/7e67570e5e1961411cae7215e006b381/raw/6cd65bc303b345fa0032c543e359c5cdf7e6150e/a.svg" preserveAspectRatio="none" clip-path="url(#satori_cp-id-1)" mask="url(#satori_om-id-1)"></image><mask id="satori_om-id-2"><rect x="304" y="653" width="193" height="0" fill="#fff"></rect></mask><path fill="black" d="M310.9 684L306.0 684L306.0 660.7L310.9 660.7L310.9 670.3L320.9 670.3L320.9 660.7L325.8 660.7L325.8 684L320.9 684L320.9 674.4L310.9 674.4L310.9 684ZM337.8 684.3L337.8 684.3Q335.1 684.3 333.1 683.2Q331.2 682.1 330.1 680.1Q329.1 678.1 329.1 675.4L329.1 675.4Q329.1 672.7 330.1 670.6Q331.2 668.6 333.1 667.5Q335 666.3 337.6 666.3L337.6 666.3Q339.3 666.3 340.8 666.9Q342.3 667.4 343.4 668.5Q344.5 669.6 345.1 671.3Q345.8 673.0 345.8 675.2L345.8 675.2L345.8 676.5L331.0 676.5L331.0 673.5L341.2 673.5Q341.2 672.5 340.8 671.7Q340.3 670.9 339.5 670.4Q338.7 669.9 337.6 669.9L337.6 669.9Q336.5 669.9 335.7 670.4Q334.9 670.9 334.4 671.8Q333.9 672.6 333.9 673.7L333.9 673.7L333.9 676.5Q333.9 677.8 334.4 678.8Q334.9 679.7 335.7 680.2Q336.6 680.7 337.8 680.7L337.8 680.7Q338.6 680.7 339.3 680.5Q340.0 680.3 340.5 679.8Q340.9 679.4 341.2 678.7L341.2 678.7L345.7 679Q345.3 680.6 344.3 681.8Q343.2 683.0 341.6 683.7Q339.9 684.3 337.8 684.3ZM348.9 660.7L353.8 660.7L353.8 684L348.9 684L348.9 660.7ZM357.6 660.7L362.5 660.7L362.5 684L357.6 684L357.6 660.7ZM374.2 684.3L374.2 684.3Q371.6 684.3 369.7 683.2Q367.7 682.1 366.7 680.1Q365.6 678.0 365.6 675.3L365.6 675.3Q365.6 672.6 366.7 670.6Q367.7 668.6 369.7 667.4Q371.6 666.3 374.2 666.3L374.2 666.3Q376.9 666.3 378.8 667.4Q380.7 668.6 381.8 670.6Q382.8 672.6 382.8 675.3L382.8 675.3Q382.8 678.0 381.8 680.1Q380.7 682.1 378.8 683.2Q376.9 684.3 374.2 684.3ZM374.2 680.6L374.2 680.6Q375.5 680.6 376.3 679.9Q377.1 679.2 377.5 678.0Q377.9 676.8 377.9 675.3L377.9 675.3Q377.9 673.8 377.5 672.6Q377.1 671.4 376.3 670.7Q375.5 670.0 374.2 670.0L374.2 670.0Q373.0 670.0 372.2 670.7Q371.4 671.4 371.0 672.6Q370.6 673.8 370.6 675.3L370.6 675.3Q370.6 676.8 371.0 678.0Q371.4 679.2 372.2 679.9Q373.0 680.6 374.2 680.6ZM387.2 680.8L391.2 680.8L391.1 682.1Q391.0 683.6 390.6 685.1Q390.1 686.6 389.7 687.8Q389.2 689.0 389.0 689.7L389.0 689.7L385.8 689.7Q386.0 689.0 386.3 687.8Q386.6 686.6 386.9 685.1Q387.1 683.6 387.2 682.1L387.2 682.1L387.2 680.8Z M413.2 684L408.4 684L401.8 660.7L407.1 660.7L411.0 676.9L411.2 676.9L415.4 660.7L420.0 660.7L424.3 676.9L424.5 676.9L428.3 660.7L433.7 660.7L427.0 684L422.3 684L417.8 668.8L417.6 668.8L413.2 684ZM442.2 684.3L442.2 684.3Q439.6 684.3 437.7 683.2Q435.7 682.1 434.7 680.1Q433.6 678.0 433.6 675.3L433.6 675.3Q433.6 672.6 434.7 670.6Q435.7 668.6 437.7 667.4Q439.6 666.3 442.2 666.3L442.2 666.3Q444.9 666.3 446.8 667.4Q448.7 668.6 449.8 670.6Q450.8 672.6 450.8 675.3L450.8 675.3Q450.8 678.0 449.8 680.1Q448.7 682.1 446.8 683.2Q444.9 684.3 442.2 684.3ZM442.3 680.6L442.3 680.6Q443.5 680.6 444.3 679.9Q445.1 679.2 445.5 678.0Q445.9 676.8 445.9 675.3L445.9 675.3Q445.9 673.8 445.5 672.6Q445.1 671.4 444.3 670.7Q443.5 670.0 442.3 670.0L442.3 670.0Q441.0 670.0 440.2 670.7Q439.4 671.4 439.0 672.6Q438.6 673.8 438.6 675.3L438.6 675.3Q438.6 676.8 439.0 678.0Q439.4 679.2 440.2 679.9Q441.0 680.6 442.3 680.6ZM458.8 684L454.0 684L454.0 666.5L458.7 666.5L458.7 669.6L458.9 669.6Q459.3 668.0 460.5 667.1Q461.6 666.3 463.1 666.3L463.1 666.3Q463.4 666.3 463.8 666.3Q464.3 666.4 464.6 666.5L464.6 666.5L464.6 670.8Q464.2 670.7 463.6 670.6Q463.0 670.5 462.5 670.5L462.5 670.5Q461.5 670.5 460.6 671.0Q459.8 671.4 459.3 672.2Q458.8 673.1 458.8 674.1L458.8 674.1L458.8 684ZM467.1 660.7L471.9 660.7L471.9 684L467.1 684L467.1 660.7ZM482.2 684.3L482.2 684.3Q480.2 684.3 478.6 683.3Q477 682.2 476.1 680.2Q475.1 678.2 475.1 675.3L475.1 675.3Q475.1 672.3 476.1 670.3Q477.1 668.3 478.7 667.3Q480.3 666.3 482.2 666.3L482.2 666.3Q483.7 666.3 484.6 666.8Q485.6 667.3 486.2 668.0Q486.8 668.8 487.2 669.5L487.2 669.5L487.3 669.5L487.3 660.7L492.1 660.7L492.1 684L487.4 684L487.4 681.2L487.2 681.2Q486.8 681.9 486.2 682.6Q485.6 683.4 484.6 683.8Q483.6 684.3 482.2 684.3ZM483.7 680.4L483.7 680.4Q484.9 680.4 485.7 679.8Q486.5 679.1 487.0 678.0Q487.4 676.8 487.4 675.3L487.4 675.3Q487.4 673.7 487.0 672.6Q486.5 671.4 485.7 670.8Q484.9 670.2 483.7 670.2L483.7 670.2Q482.5 670.2 481.7 670.8Q480.9 671.5 480.5 672.6Q480.1 673.8 480.1 675.3L480.1 675.3Q480.1 676.8 480.5 678.0Q480.9 679.1 481.7 679.8Q482.5 680.4 483.7 680.4Z "></path></svg>

Actual (browser render)
CleanShot 2024-07-22 at 09 51 10@2x

As is:
CleanShot 2024-07-22 at 09 51 35@2x

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedExtra attention is needed

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions