fskpf/svg2roughjs

Certain SVGs render completely blank

ygra opened this issue · 1 comments

ygra commented

e.g.

<?xml version="1.0" encoding="UTF-8"?>
<svg color-interpolation="auto" color-rendering="auto" fill="#000000" font-family="Dialog" font-size="12px" image-rendering="auto" shape-rendering="auto" stroke="#000000" stroke-linecap="square" stroke-miterlimit="10" text-rendering="auto" version="1.1" viewBox="0 0 125 71" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(-5.12 -114)">
    <defs>
      <clipPath id="clipPath2">
        <path d="m-15-266h560v267h-560z"/>
      </clipPath>
    </defs>
    <g shape-rendering="geometricPrecision">
      <g transform="translate(67,122)" image-rendering="optimizeQuality">
        <circle transform="translate(-52,144)" cx="80" cy="-116" r="20" clip-path="url(#clipPath2)" fill="#fff" image-rendering="auto" stroke="none"/>
        <circle transform="translate(-52,144)" cx="80" cy="-116" r="20" clip-path="url(#clipPath2)" fill="none" image-rendering="auto" stroke-linecap="butt" stroke-miterlimit="1.45"/>
        <circle transform="translate(-52,144)" cx="80" cy="-116" r="17" clip-path="url(#clipPath2)" fill="none" image-rendering="auto" stroke-linecap="butt" stroke-miterlimit="1.45"/>
      </g>
      <g transform="translate(15,266)" font-family="sans-serif" stroke-linecap="butt" stroke-miterlimit="1.45" text-rendering="geometricPrecision">
        <text x="75.998001" y="-111.2861" clip-path="url(#clipPath2)" stroke="none" xml:space="preserve">S</text>
      </g>
      <g transform="translate(15,266)" stroke-linecap="butt" stroke-miterlimit="1.45">
        <path transform="matrix(3.9 0 0 3.9 -151 336)" d="m40-116h12" clip-path="url(#clipPath2)" fill="none" stroke-width=".257"/>
        <path d="m60-116-12-5 3 5-3 5z" clip-path="url(#clipPath2)" stroke="none"/>
      </g>
    </g>
  </g>
</svg>

or

<?xml version="1.0" encoding="UTF-8"?>
<svg color-interpolation="auto" color-rendering="auto" fill="black" font-family="'Dialog'" font-size="12px" image-rendering="auto" shape-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" text-rendering="auto" version="1.1" viewBox="0 0 560 267" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="clipPath2">
      <path d="m-15-266h560v267h-560v-267z"/>
    </clipPath>
  </defs>
  <g shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
    <g transform="translate(67 122)" image-rendering="optimizeQuality" style="">
      <circle transform="translate(-52 144)" cx="80" cy="-116" r="20" clip-path="url(#clipPath2)" fill="#fff" image-rendering="auto" stroke="none"/>
      <circle transform="translate(-52 144)" cx="80" cy="-116" r="20" clip-path="url(#clipPath2)" fill="none" image-rendering="auto" stroke-linecap="butt" stroke-miterlimit="1.45"/>
      <circle transform="translate(-52 144)" cx="80" cy="-116" r="17" clip-path="url(#clipPath2)" fill="none" image-rendering="auto" stroke-linecap="butt" stroke-miterlimit="1.45"/>
    </g>
    <g transform="translate(15 266)" font-family="sans-serif" stroke-linecap="butt" stroke-miterlimit="1.45">
      <text x="75.998" y="-111.2861" clip-path="url(#clipPath2)" stroke="none" xml:space="preserve">S</text>
    </g>
    <g transform="translate(167 122)" image-rendering="optimizeQuality" style="">
      <circle transform="translate(-152 144)" cx="180" cy="-116" r="20" clip-path="url(#clipPath2)" fill="#fff" image-rendering="auto" stroke="none"/>
      <circle transform="translate(-152 144)" cx="180" cy="-116" r="20" clip-path="url(#clipPath2)" fill="none" image-rendering="auto" stroke-linecap="butt" stroke-miterlimit="1.45"/>
    </g>
    <g transform="translate(15 266)" font-family="sans-serif" stroke-linecap="butt" stroke-miterlimit="1.45">
      <text x="173.3262" y="-111.2861" clip-path="url(#clipPath2)" stroke="none" xml:space="preserve">q0</text>
    </g>
    <g transform="translate(257 87)" image-rendering="optimizeQuality" style="">
      <circle transform="translate(-242 179)" cx="270" cy="-151" r="20" clip-path="url(#clipPath2)" fill="#fff" image-rendering="auto" stroke="none"/>
      <circle transform="translate(-242 179)" cx="270" cy="-151" r="20" clip-path="url(#clipPath2)" fill="none" image-rendering="auto" stroke-linecap="butt" stroke-miterlimit="1.45"/>
    </g>
    <g transform="translate(15 266)" font-family="sans-serif" stroke-linecap="butt" stroke-miterlimit="1.45">
      <text x="263.3262" y="-146.2861" clip-path="url(#clipPath2)" stroke="none" xml:space="preserve">q1</text>
    </g>
    <g transform="translate(363 46)" image-rendering="optimizeQuality" style="">
      <circle transform="translate(-348 220)" cx="376" cy="-192" r="20" clip-path="url(#clipPath2)" fill="#fff" image-rendering="auto" stroke="none"/>
      <circle transform="translate(-348 220)" cx="376" cy="-192" r="20" clip-path="url(#clipPath2)" fill="none" image-rendering="auto" stroke-linecap="butt" stroke-miterlimit="1.45"/>
      <circle transform="translate(-348 220)" cx="376" cy="-192" r="17" clip-path="url(#clipPath2)" fill="none" image-rendering="auto" stroke-linecap="butt" stroke-miterlimit="1.45"/>
    </g>
    <g transform="translate(15 266)" font-family="sans-serif" stroke-linecap="butt" stroke-miterlimit="1.45">
      <text x="369.3262" y="-187.2861" clip-path="url(#clipPath2)" stroke="none" xml:space="preserve">q2</text>
    </g>
    <g transform="translate(257 157)" image-rendering="optimizeQuality" style="">
      <circle transform="translate(-242 109)" cx="270" cy="-81" r="20" clip-path="url(#clipPath2)" fill="#fff" image-rendering="auto" stroke="none"/>
      <circle transform="translate(-242 109)" cx="270" cy="-81" r="20" clip-path="url(#clipPath2)" fill="none" image-rendering="auto" stroke-linecap="butt" stroke-miterlimit="1.45"/>
    </g>
    <g transform="translate(15 266)" font-family="sans-serif" stroke-linecap="butt" stroke-miterlimit="1.45">
      <text x="263.3262" y="-76.2861" clip-path="url(#clipPath2)" stroke="none" xml:space="preserve">q3</text>
    </g>
    <g transform="translate(363 157)" image-rendering="optimizeQuality" style="">
      <circle transform="translate(-348 109)" cx="376" cy="-81" r="20" clip-path="url(#clipPath2)" fill="#fff" image-rendering="auto" stroke="none"/>
      <circle transform="translate(-348 109)" cx="376" cy="-81" r="20" clip-path="url(#clipPath2)" fill="none" image-rendering="auto" stroke-linecap="butt" stroke-miterlimit="1.45"/>
    </g>
    <g transform="translate(15 266)" font-family="sans-serif" stroke-linecap="butt" stroke-miterlimit="1.45">
      <text x="369.3262" y="-76.2861" clip-path="url(#clipPath2)" stroke="none" xml:space="preserve">q4</text>
    </g>
    <g transform="translate(469 157)" image-rendering="optimizeQuality" style="">
      <circle transform="translate(-454 109)" cx="482" cy="-81" r="20" clip-path="url(#clipPath2)" fill="#fff" image-rendering="auto" stroke="none"/>
      <circle transform="translate(-454 109)" cx="482" cy="-81" r="20" clip-path="url(#clipPath2)" fill="none" image-rendering="auto" stroke-linecap="butt" stroke-miterlimit="1.45"/>
      <circle transform="translate(-454 109)" cx="482" cy="-81" r="17" clip-path="url(#clipPath2)" fill="none" image-rendering="auto" stroke-linecap="butt" stroke-miterlimit="1.45"/>
    </g>
    <g stroke-linecap="butt" stroke-miterlimit="1.45">
      <g transform="translate(15 266)" font-family="sans-serif">
        <text x="475.3262" y="-76.2861" clip-path="url(#clipPath2)" stroke="none" xml:space="preserve">q5</text>
      </g>
      <g transform="translate(15 266)">
        <path d="m100-116h52.1" clip-path="url(#clipPath2)" fill="none"/>
      </g>
      <g transform="translate(15 266)">
        <path d="m160-116-12-5 3 5-3 5z" clip-path="url(#clipPath2)" stroke="none"/>
        <text x="127.3252" y="-121.6367" clip-path="url(#clipPath2)" font-family="sans-serif" stroke="none" xml:space="preserve">ε</text>
        <path transform="matrix(3.9 0 0 3.9 -151 336)" d="m40-116h12" clip-path="url(#clipPath2)" fill="none" stroke-width=".257"/>
        <path d="m60-116-12-5 3 5-3 5z" clip-path="url(#clipPath2)" stroke="none"/>
        <path d="m199-123 45.2-17.6" clip-path="url(#clipPath2)" fill="none"/>
        <path d="m251-144-13-0.311 4.61 3.57-0.984 5.75z" clip-path="url(#clipPath2)" stroke="none"/>
        <text x="221.6631" y="-141.2122" clip-path="url(#clipPath2)" font-family="sans-serif" stroke="none" xml:space="preserve">0</text>
        <path d="m289-158 61.2-23.7" clip-path="url(#clipPath2)" fill="none"/>
        <path d="m357-185-13-0.334 4.6 3.58-0.994 5.75z" clip-path="url(#clipPath2)" stroke="none"/>
        <text x="319.6631" y="-179.201" clip-path="url(#clipPath2)" font-family="sans-serif" stroke="none" xml:space="preserve">0</text>
        <path d="m395-185s3.32-0.263 4.93-0.629c1.64-0.372 3.25-0.903 4.79-1.59 1.56-0.694 3.07-1.54 4.47-2.53 1.44-1.02 2.78-2.19 3.99-3.47 1.21-1.29 2.29-2.7 3.22-4.2 0.899-1.46 1.65-3.01 2.25-4.62 0.585-1.58 1.01-3.22 1.28-4.88 0.267-1.65 0.374-3.33 0.322-5-0.0524-1.67-0.265-3.34-0.634-4.97-0.372-1.64-0.903-3.25-1.59-4.79-0.694-1.56-1.54-3.07-2.53-4.47-1.02-1.44-2.19-2.78-3.47-3.99-1.29-1.21-2.7-2.29-4.2-3.22-1.46-0.899-3.01-1.65-4.62-2.25-1.58-0.585-3.22-1.01-4.88-1.28-1.65-0.267-3.33-0.374-5-0.322-1.67 0.0524-3.34 0.265-4.97 0.634-1.64 0.372-3.25 0.903-4.79 1.59-1.56 0.694-3.07 1.54-4.47 2.53-1.44 1.02-2.78 2.19-3.99 3.47-1.21 1.29-2.29 2.7-3.22 4.2-0.899 1.46-1.65 3.01-2.25 4.62-0.23 0.621-0.398 1.27-0.504 1.92-5e-3 0.0329-6e-3 0.0998-6e-3 0.0998" clip-path="url(#clipPath2)" fill="none"/>
        <path d="m368-210 6.61-11.2-5.37 2.28-4.54-3.66z" clip-path="url(#clipPath2)" stroke="none" style=""/>
        <text x="404.2209" y="-236.9214" clip-path="url(#clipPath2)" font-family="sans-serif" stroke="none" xml:space="preserve">0</text>
        <g style="">
          <path d="m359-202s-0.683-0.419-1.03-0.61c-5.72-3.1-11.5-6.04-17.5-8.7-5.46-2.44-11-4.7-16.7-6.63-5.21-1.78-10.5-3.35-15.9-4.56-4.96-1.12-9.99-2-15.1-2.49-4.73-0.46-9.51-0.642-14.3-0.423-4.51 0.208-9.03 0.732-13.5 1.65-4.3 0.889-8.55 2.13-12.7 3.72-4.1 1.59-8.07 3.54-11.8 5.78-3.88 2.31-7.57 4.96-11 7.85-3.66 3.04-7.06 6.39-10.2 9.92-3.41 3.78-6.53 7.82-9.44 12-3.15 4.51-5.99 9.24-8.64 14.1-2.87 5.24-5.45 10.6-7.84 16.1-1.69 3.88-3.2 7.85-4.58 11.9-0.0109 0.0315-0.0294 0.0956-0.0294 0.0956" clip-path="url(#clipPath2)" fill="none"/>
          <path d="m186-135 8.9-9.48-5.74 1.05-3.63-4.57z" clip-path="url(#clipPath2)" stroke="none"/>
        </g>
        <text transform="translate(-32.2 1.16)" x="296.9256" y="-216.1312" clip-path="url(#clipPath2)" font-family="sans-serif" stroke="none" xml:space="preserve">ε</text>
        <path d="m199-109 45.2 17.6" clip-path="url(#clipPath2)" fill="none"/>
        <path d="m251-88.2-9.37-9.01 0.984 5.75-4.61 3.57z" clip-path="url(#clipPath2)" stroke="none"/>
        <text x="221.6631" y="-106.2122" clip-path="url(#clipPath2)" font-family="sans-serif" stroke="none" xml:space="preserve">1</text>
        <path d="m290-81h58" clip-path="url(#clipPath2)" fill="none"/>
        <path d="m356-81-12-5 3 5-3 5z" clip-path="url(#clipPath2)" stroke="none"/>
        <text x="319.6631" y="-65.9355" clip-path="url(#clipPath2)" font-family="sans-serif" stroke="none" xml:space="preserve">0</text>
        <path d="m287-140 66 43.6" clip-path="url(#clipPath2)" fill="none"/>
        <path d="m359-92-7.26-10.8-0.252 5.83-5.26 2.52z" clip-path="url(#clipPath2)" stroke="none"/>
        <text x="319.6631" y="-125.1611" clip-path="url(#clipPath2)" font-family="sans-serif" stroke="none" xml:space="preserve">1</text>
        <path d="m396-81h58" clip-path="url(#clipPath2)" fill="none"/>
        <path d="m462-81-12-5 3 5-3 5z" clip-path="url(#clipPath2)" stroke="none"/>
        <text x="425.6631" y="-86.6367" clip-path="url(#clipPath2)" font-family="sans-serif" stroke="none" xml:space="preserve">0</text>
        <path d="m477-61.6s3.5e-4 0.0262 2e-3 0.0391c0.263 1.65 0.686 3.29 1.26 4.86 0.578 1.58 1.31 3.12 2.18 4.56 0.888 1.47 1.92 2.86 3.08 4.12 1.2 1.3 2.53 2.49 3.96 3.53 1.43 1.04 2.97 1.93 4.58 2.67 1.56 0.71 3.2 1.26 4.87 1.65 1.64 0.381 3.33 0.599 5.02 0.656 1.67 0.0565 3.36-0.0503 5.01-0.314 1.65-0.264 3.29-0.686 4.86-1.26 1.58-0.578 3.12-1.31 4.56-2.18 1.47-0.888 2.86-1.92 4.12-3.08 1.3-1.2 2.49-2.53 3.53-3.96 1.04-1.43 1.93-2.97 2.67-4.58 0.71-1.56 1.26-3.2 1.65-4.87 0.381-1.64 0.599-3.33 0.656-5.02 0.0565-1.67-0.0503-3.36-0.314-5.01-0.264-1.65-0.686-3.29-1.26-4.86-0.578-1.58-1.31-3.12-2.18-4.56-0.888-1.47-1.92-2.86-3.08-4.12-1.2-1.3-2.53-2.49-3.96-3.53-1.43-1.04-2.97-1.93-4.58-2.67-1.56-0.71-3.2-1.26-4.87-1.65-0.677-0.157-1.37-0.247-2.07-0.27-0.0333-0.0011-0.0998 0.0064-0.0998 0.0064" clip-path="url(#clipPath2)" fill="none"/>
        <path d="m499-91.5 12 5.1-2.96-5.03 3.04-4.97z" clip-path="url(#clipPath2)" stroke="none"/>
        <text transform="translate(10.1 26.7)" x="514.41821" y="-64.583504" clip-path="url(#clipPath2)" font-family="sans-serif" stroke="none" xml:space="preserve">0</text>
        <path d="m390-178 72.9 76.3" clip-path="url(#clipPath2)" fill="none"/>
        <path d="m468-95.5-4.67-12.1-1.54 5.62-5.69 1.28z" clip-path="url(#clipPath2)" stroke="none"/>
        <text x="425.6631" y="-147.7254" clip-path="url(#clipPath2)" font-family="sans-serif" stroke="none" xml:space="preserve">1</text>
        <path d="m467-68.3s-3.7 3.14-5.63 4.6c-6.76 5.13-13.7 10.1-20.8 14.7-6.67 4.3-13.5 8.37-20.5 12.1-6.59 3.47-13.3 6.68-20.2 9.48-6.51 2.64-13.2 4.99-19.9 6.89-6.45 1.81-13 3.28-19.6 4.3-6.39 0.977-12.9 1.57-19.3 1.7-6.35 0.13-12.7-0.16-19-0.891-6.31-0.731-12.6-1.91-18.7-3.48-6.26-1.61-12.4-3.66-18.4-6.08-6.21-2.5-12.3-5.43-18.1-8.67-6.15-3.4-12.1-7.2-17.8-11.3-6.08-4.3-11.9-8.97-17.5-13.9-5.99-5.21-11.7-10.7-17.2-16.5-5.73-5.94-11.2-12.1-16.4-18.5-0.0212-0.0257-0.0609-0.0793-0.0609-0.0793" clip-path="url(#clipPath2)" fill="none"/>
        <path d="m192-100 3.43 12.5 2.1-5.44 5.79-0.705z" clip-path="url(#clipPath2)" stroke="none"/>
        <text transform="translate(-48.4 7.36)" x="384.4537" y="-25.346701" clip-path="url(#clipPath2)" font-family="sans-serif" stroke="none" xml:space="preserve">ε</text>
      </g>
    </g>
  </g>
</svg>
fskpf commented

They were missing due to unsupported <path> clip-paths: #73

I've changed the code to omit unsupported clip-paths entirely, such that the mentioned SVGs get converted correctly, as the clip-path does nothing anyway in these SVGs.