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 바이올린 사라 않는 경우 :

https://jsfiddle.net/5bbd4r12/는 좀 다른 예를 시도하고 비 차 곡선으로 작동하는 것으로 보인다. ... 도움을

감사합니다, 내가 좀 이것에 내 머리를 당겨있어

Answer 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>