dompdf / php-svg-lib

SVG file parsing / rendering library
GNU Lesser General Public License v3.0
1.4k stars 77 forks source link

<use xlink:href="#ID"> problem #58

Closed krolovolk closed 6 months ago

krolovolk commented 4 years ago

Hello! Doesn't correctly parse svg with local links to tags. For example,

<symbol  id="chair" viewBox="-4.8 -4.6 9.5 9.2">
    <path fill="none" stroke="#AE8E72" stroke-width="0.25" stroke-miterlimit="10" d="M-3.7-2.7h-0.5c0,0,0,0,0,0v-0.9
        c0.1,0,0.3-0.1,0.5-0.1V-2.7z"/>
    <path fill="none" stroke="#AE8E72" stroke-width="0.25" stroke-miterlimit="10" d="M-3.7,3.9v0.3c0,0.1-0.1,0.3-0.3,0.3
        s-0.3-0.1-0.3-0.3V3.9c0,0,0,0,0,0H-3.7z"/>
</symbol>

<use xlink:href="#chair"  width="9.5" height="9.2" x="-4.8" y="-4.6" transform="matrix(-0.7071 0.7071 0.7071 0.7071 46.102 160.4048)" overflow="visible"/>
<use xlink:href="#chair"  width="9.5" height="9.2" x="-4.8" y="-4.6" transform="matrix(0.7071 0.7071 0.7071 -0.7071 46.102 179.4129)" overflow="visible"/>

Objects are shown on first symbol positions. Thanks for support

simonschaufi commented 4 years ago

@PhenX I would also love to see a fix for this.

LWlook commented 1 year ago

Have the same error.

bsweeney commented 8 months ago

I don't know if the issue here was with the ID reference or just the general lackluster symbol support. ID references should be OK in the current release. symbol support is still not great.

I'm unable to get the sample posted here to display even in a web browser. But with some changes to the code, I am able to render the following sample provided on MDN:

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <!-- Our symbol in its own coordinate system -->
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" />
  </symbol>

  <!-- A grid to materialize our symbol positioning -->
  <path
    d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
    fill="none"
    stroke="pink" />

  <!-- All instances of our symbol -->
  <use href="#myDot" x="5" y="5" style="opacity:1.0" />
  <use href="#myDot" x="20" y="5" style="opacity:0.8" />
  <use href="#myDot" x="35" y="5" style="opacity:0.6" />
  <use href="#myDot" x="50" y="5" style="opacity:0.4" />
  <use href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>