我试图在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>
这里是小提琴:https://jsfiddle.net/5bbd4r12/
我尝试了其他一些例子,它似乎适用于非立方曲线......
感谢您的帮助,我有点想把这头发拉下来哈哈
答案 0 :(得分:1)
它离开画布(离左边太远),所以你看不到它。我已经增加了翻译,所以你可以看到它。
<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>