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>