search

felixfbecker / dom-to-svg

Library to convert a given HTML DOM node into an accessible SVG "screenshot".
MIT License
377 stars 41 forks source link

Linear gradient stops are badly interpreted #190

Open fidlip opened 4 months ago

fidlip commented 4 months ago

I'm using last version of dom-to-svg package = @0.12.2 When I have this gradient in dom:

<div style="background: linear-gradient(to right, rgb(29, 62, 89) 0%, rgb(29, 62, 89) 33.3333%, rgb(128, 128, 128) 33.3333%, rgb(128, 128, 128) 66.6667%, rgb(158, 21, 53) 66.6667%, rgb(158, 21, 53) 100%);"></div>

after conversion I got magically this:

<g data-tag="div" id="variant-color-circle1" class="variant-color-circle" data-z-index="auto" data-stacking-context="true">
            <g data-stacking-layer="rootBackgroundAndBorders">
              <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="linear-gradient1">
                <stop offset="0%" stop-color="rgb(29,62,89)" stop-opacity="1"/>
                <stop offset="20%" stop-color="rgb(29,62,89)" stop-opacity="1"/>
                <stop offset="40%" stop-color="rgb(128,128,128)" stop-opacity="1"/>
                <stop offset="60%" stop-color="rgb(128,128,128)" stop-opacity="1"/>
                <stop offset="80%" stop-color="rgb(158,21,53)" stop-opacity="1"/>
                <stop offset="100%" stop-color="rgb(158,21,53)" stop-opacity="1"/>
              </linearGradient>
              <rect width="37.78125" height="37.78125" x="276.015625" y="452.90625" fill="url(#linear-gradient1)" stroke="rgb(0, 0, 0)" stroke-width="1px" rx="18.890625" ry="18.890625"/>
            </g>
          </g>

instead of this:

<g data-tag="div" id="variant-color-circle1" class="variant-color-circle" data-z-index="auto" data-stacking-context="true">
            <g data-stacking-layer="rootBackgroundAndBorders">
              <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="linear-gradient1">
                <stop offset="0%" stop-color="rgb(29,62,89)" stop-opacity="1"/>
                <stop offset="33.3333%" stop-color="rgb(29,62,89)" stop-opacity="1"/>
                <stop offset="33.3333%" stop-color="rgb(128,128,128)" stop-opacity="1"/>
                <stop offset="66.6667%" stop-color="rgb(128,128,128)" stop-opacity="1"/>
                <stop offset="66.6667%" stop-color="rgb(158,21,53)" stop-opacity="1"/>
                <stop offset="100%" stop-color="rgb(158,21,53)" stop-opacity="1"/>
              </linearGradient>
              <rect width="37.78125" height="37.78125" x="276.015625" y="452.90625" fill="url(#linear-gradient1)" stroke="rgb(0, 0, 0)" stroke-width="1px" rx="18.890625" ry="18.890625"/>
            </g>
          </g>