dom-to-svg
dom-to-svg copied to clipboard
Linear gradient stops are badly interpreted
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>