Svg.Skia icon indicating copy to clipboard operation
Svg.Skia copied to clipboard

Translation on a path not working

Open jpodpro opened this issue 10 months ago • 1 comments

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>

jpodpro avatar Apr 18 '24 22:04 jpodpro

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>

jpodpro avatar Apr 18 '24 22:04 jpodpro