SVG 贝塞尔曲线上的负比例不起作用

Question

我想在 SVG 中制作徽标，为此，我需要进行镜像。我在我的路径上使用了负比例变换，但是当我这样做时它就消失了...

<svg  width="1024" height="1024">\
    <g transform="scale(.5)">
            <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:#FDDAC2;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#F7984F;stop-opacity:1" />
                </linearGradient>
                <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="10%" style="stop-color:#e8e8e8;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:white;stop-opacity:1" />
                </linearGradient>
            </defs>
            <path d="M220 130 C 570 190, 530 250, 430 620 C 500 270, 420 190, 220 130 Z" fill="url(#grad2)"  stroke="#89898C" stroke-width="4" />

            <path d="M220 130 C 570 190, 530 250, 430 620, C 500 270, 420 190, 220 130 Z" stroke="#89898C" stroke-width="4" fill="url(#grad2)"  transform="translate(200, 0) scale(-1, 1)" />
        </g>
    </svg>

这里是 js fiddle : https://jsfiddle.net/5bbd4r12/

我尝试了一些其他示例，它似乎适用于非三次曲线...

谢谢你的帮助，我有点把头发扯掉了哈哈

Answer 1

它在 canvas 之外（太靠左了）所以你看不到它。我增加了翻译，所以你可以看到它。

<svg  width="1024" height="1024">
    <g transform="scale(.5)">
            <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:#FDDAC2;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#F7984F;stop-opacity:1" />
                </linearGradient>
                <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="10%" style="stop-color:#e8e8e8;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:white;stop-opacity:1" />
                </linearGradient>
            </defs>
            <path d="M220 130 C 570 190, 530 250, 430 620 C 500 270, 420 190, 220 130 Z" fill="url(#grad2)"  stroke="#89898C" stroke-width="4" />

            <path d="M220 130 C 570 190, 530 250, 430 620, C 500 270, 420 190, 220 130 Z" stroke="#89898C" stroke-width="4" fill="url(#grad2)"  transform="translate(450, 0) scale(-1, 1)" />
        </g>
    </svg>

SVG 贝塞尔曲线上的负比例不起作用

Negative scale on SVG Bezier curve not working

svg

curve

transformation

scale

cubic