Svg.Skia
Svg.Skia copied to clipboard
Translation on a path not working
I have tried putting X,Y translation in an SVG style block and directly on my path element. No transforms are being done.
The following SVG renders properly as an SVG but the transforms are not working when using this to convert to PNG.
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 609" width="500" height="609">
<defs>
<filter id="shadow" style="color-interpolation-filters:sRGB;" x="-100%" y="-100%" width="300%" height="400%">
<feFlood flood-opacity="1" flood-color="rgb(31 40 50 / 1)" result="flood" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="comp" />
<feOffset dx="3" dy="15" result="offset" />
<feGaussianBlur in="offset" stdDeviation="20" result="blur" />
<feBlend in="SourceGraphic" in2="blur" mode="normal" />
</filter>
<filter id="stroke-inside" x='-50%' y='-50%' width='200%' height='200%'>
<feFlood flood-color="#FFF" result="inside-color"/>
<feComposite in2="SourceAlpha" operator="in" result="inside-stroke"/>
<feMorphology in="SourceAlpha" radius="8" />
<feComposite in="SourceGraphic" operator="in" result="fill-area"/>
<feMerge>
<feMergeNode in="inside-stroke"/>
<feMergeNode in="fill-area"/>
</feMerge>
</filter>
</defs>
<style>
.marker{ fill:#008ff4; fill-opacity:1; filter:url(#stroke-inside); }
.marker-shadow{ filter:url(#shadow); stroke:#444; stroke-width:12px; }
.icon{ fill:#fff; fill-opacity:1; transform:translateX(90px) translateY(105px) scale(0.9); }
</style>
<path class="marker-shadow" d="m228 91.1c-2.5 0.5-8.3 1.6-13 2.5-4.7 0.9-13.8 3.3-20.3 5.5-6.4 2.1-16.5 6.3-22.5 9.3-5.9 3-14.6 8-19.4 11.3-4.8 3.2-12.6 9.2-17.4 13.3-4.9 4.1-12.1 11.3-16.2 16-4.1 4.7-10.7 13.4-14.8 19.5-4 6-9.3 15.3-11.8 20.5-2.5 5.2-6.1 14.2-8 20-2 5.8-4.4 14.8-5.5 20-1.1 5.2-2.5 13.9-3 19.2-0.6 5.4-1.1 12.9-1.1 16.8 0 3.8 0.7 11.6 1.5 17.2 0.9 5.7 2.7 14.8 4.2 20.3 1.4 5.5 4.4 14.7 6.6 20.5 2.2 5.8 7 16.3 10.7 23.5 3.6 7.1 10.2 18.6 14.5 25.5 4.4 6.9 12.7 18.8 18.5 26.5 5.7 7.7 14.9 19.2 20.3 25.5 5.5 6.3 15.1 17.1 21.6 23.9 6.4 6.9 19 19.4 28.1 27.9 9.1 8.5 23.1 21 31.2 27.8 10.3 8.6 15.6 12.4 17.3 12.4 1.4 0 4-1 5.7-2.3 1.8-1.2 8-6.2 13.8-11 5.8-4.9 18.1-15.9 27.4-24.5 9.3-8.7 22.8-22 30-29.7 7.2-7.7 16.9-18.5 21.7-24 4.7-5.5 11.8-14.3 15.9-19.5 4.1-5.2 11.6-15.6 16.6-23 5-7.4 12.2-18.9 15.9-25.5 3.7-6.6 8.6-16.3 11-21.5 2.3-5.2 5.7-13.6 7.4-18.5 1.8-5 4.1-12.6 5.2-17 1.1-4.4 2.7-12.5 3.5-18 0.7-5.5 1.4-13.5 1.4-17.8 0-4.2-0.7-13-1.5-19.5-0.9-6.4-2.7-16.2-4.1-21.7-1.4-5.5-4.1-14.3-6.1-19.5-1.9-5.2-5.7-13.8-8.5-19-2.8-5.2-7.8-13.5-11.2-18.4-3.3-4.9-9.5-12.8-13.6-17.5-4.1-4.7-11.1-11.6-15.5-15.4-4.4-3.7-12.1-9.5-17-12.9-5-3.3-13.7-8.4-19.5-11.3-5.8-2.9-14.6-6.7-19.5-8.4-5-1.8-11.5-3.8-14.5-4.6-3-0.8-10.8-2.3-17.3-3.5-8.8-1.5-15.7-2-28-1.9-8.9 0.1-18.2 0.5-20.7 1z"/>
<path class="marker" d="m228 91.1c-2.5 0.5-8.3 1.6-13 2.5-4.7 0.9-13.8 3.3-20.3 5.5-6.4 2.1-16.5 6.3-22.5 9.3-5.9 3-14.6 8-19.4 11.3-4.8 3.2-12.6 9.2-17.4 13.3-4.9 4.1-12.1 11.3-16.2 16-4.1 4.7-10.7 13.4-14.8 19.5-4 6-9.3 15.3-11.8 20.5-2.5 5.2-6.1 14.2-8 20-2 5.8-4.4 14.8-5.5 20-1.1 5.2-2.5 13.9-3 19.2-0.6 5.4-1.1 12.9-1.1 16.8 0 3.8 0.7 11.6 1.5 17.2 0.9 5.7 2.7 14.8 4.2 20.3 1.4 5.5 4.4 14.7 6.6 20.5 2.2 5.8 7 16.3 10.7 23.5 3.6 7.1 10.2 18.6 14.5 25.5 4.4 6.9 12.7 18.8 18.5 26.5 5.7 7.7 14.9 19.2 20.3 25.5 5.5 6.3 15.1 17.1 21.6 23.9 6.4 6.9 19 19.4 28.1 27.9 9.1 8.5 23.1 21 31.2 27.8 10.3 8.6 15.6 12.4 17.3 12.4 1.4 0 4-1 5.7-2.3 1.8-1.2 8-6.2 13.8-11 5.8-4.9 18.1-15.9 27.4-24.5 9.3-8.7 22.8-22 30-29.7 7.2-7.7 16.9-18.5 21.7-24 4.7-5.5 11.8-14.3 15.9-19.5 4.1-5.2 11.6-15.6 16.6-23 5-7.4 12.2-18.9 15.9-25.5 3.7-6.6 8.6-16.3 11-21.5 2.3-5.2 5.7-13.6 7.4-18.5 1.8-5 4.1-12.6 5.2-17 1.1-4.4 2.7-12.5 3.5-18 0.7-5.5 1.4-13.5 1.4-17.8 0-4.2-0.7-13-1.5-19.5-0.9-6.4-2.7-16.2-4.1-21.7-1.4-5.5-4.1-14.3-6.1-19.5-1.9-5.2-5.7-13.8-8.5-19-2.8-5.2-7.8-13.5-11.2-18.4-3.3-4.9-9.5-12.8-13.6-17.5-4.1-4.7-11.1-11.6-15.5-15.4-4.4-3.7-12.1-9.5-17-12.9-5-3.3-13.7-8.4-19.5-11.3-5.8-2.9-14.6-6.7-19.5-8.4-5-1.8-11.5-3.8-14.5-4.6-3-0.8-10.8-2.3-17.3-3.5-8.8-1.5-15.7-2-28-1.9-8.9 0.1-18.2 0.5-20.7 1z"/>
<path class="icon" d="m169.3 61.3c-2.2 1.7-18.8 16.2-36.9 32.2-18.1 15.9-40.7 35.8-50.2 44.2-14.3 12.7-17.2 15.8-17.2 18-0.1 1.6 0.7 3.6 1.7 4.5 1.3 1.3 3.5 1.8 8 1.8h6.3v92c4.1 2.8 9.3 3 33 3 23.7 0 28.9-0.2 30.7-1.5 2.3-1.5 2.3-1.9 2.3-20.8 0-13.7 0.4-20.6 1.4-24.2 0.8-2.8 3-7 4.8-9.5 2.2-2.8 5.4-5.5 8.9-7.3 2.9-1.5 7.4-3 9.9-3.3 2.8-0.4 6.5-0.1 10 0.9 3 0.8 7.5 3 9.9 4.9 2.4 1.8 5.8 5.8 7.5 8.8l3.1 5.5c0.5 43.1 0.5 43.5 2.7 45 1.9 1.3 7.1 1.5 30.8 1.5 23.7 0 28.9-0.2 30.7-1.5l2.3-1.5v-92c11 0.1 12.9-0.4 14.2-1.7 1-1 1.8-2.9 1.8-4.3 0-1.7-1.5-4-4.7-7.1-2.7-2.5-25.5-22.8-50.8-45-25.3-22.2-47.5-41.6-49.3-43.2-1.7-1.5-4-2.7-5-2.7-1.1 0-3.7 1.5-5.9 3.2z"/>
</svg>
Turns out wrapping my icon path in <g>
and specifying the transformation on that element worked.
<g fill="#FFF" transform="translate(90 105) scale(0.9)"><path class="icon" ... /></g>