dom-to-svg icon indicating copy to clipboard operation
dom-to-svg copied to clipboard

Linear gradient stops are badly interpreted

Open fidlip opened this issue 10 months ago • 0 comments

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>

fidlip avatar Apr 22 '24 15:04 fidlip