SVG填充不正確

我測試了一個漸變填充我的標誌。我似乎無法將中心點移到花瓣的左下角。我究竟做錯了什麼？我瘋狂搜索並整個擺弄。如何能夠將我的徑向漸變的起點調整到左下角（或者對於這個問題，可以是任何）角（或側）？SVG填充不正確

<?xml version="1.0" encoding="UTF-8" ?> 
 

 
    <svg width="347pt" height="366pt" viewBox="0 0 347 366" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
     <radialGradient id="gradpetal" gradientUnits="userSpaceOnUse"> 
 
     <stop stop-color="#ffdcfd" offset=".01" /> 
 
     <stop stop-color="#ff94dd" offset="0.15" /> 
 
     <stop stop-color="#ff92dd" offset="0.17" /> 
 
     <stop stop-color="#feadef" offset=".32" /> 
 
     <stop stop-color="#fec3ff" offset=".49" /> 
 
     <stop stop-color="#fec3ff" offset=".8" /> 
 
     <stop stop-color="#fe9bee" offset="1" /> 
 
     </radialGradient> 
 
    </defs> 
 
    <path id="svgmoon" d=" M 125.71 4.83 C 132.21 2.77 139.01 1.97 145.66 0.59 C 133.00 9.73 120.78 19.62 110.14 31.11 C 95.76 46.55 84.01 64.51 76.14 84.11 C 58.65 127.32 60.32 176.94 76.88 220.16 C 82.95 234.74 89.81 249.48 101.01 260.89 C 110.02 269.31 119.13 277.77 129.66 284.30 C 148.41 296.68 169.88 304.84 192.02 308.51 C 216.22 312.44 241.09 311.13 265.04 306.14 C 286.12 301.57 306.41 293.94 325.81 284.60 C 332.75 280.95 339.69 277.31 346.63 273.65 C 338.54 285.17 330.90 297.05 321.77 307.80 C 309.52 322.73 294.55 335.51 277.40 344.48 C 247.85 359.93 213.98 364.68 181.02 365.43 C 146.84 365.46 112.77 355.39 83.93 337.08 C 54.54 318.15 30.44 290.79 16.33 258.74 C 7.91 239.92 2.64 219.67 0.89 199.12 C 0.42 190.44 0.54 181.74 0.82 173.06 C 3.04 133.90 17.63 95.66 41.68 64.69 C 63.28 37.42 92.09 14.92 125.71 4.83 Z" 
 
    /> 
 
    <path id="svgpetal" fill="url(#gradpetal)" x1="0" y1="0" x2="50" width="350" height="370" d=" M 238.54 53.89 C 246.99 52.67 255.63 52.63 264.04 54.18 C 266.61 54.66 269.01 56.33 269.99 58.80 C 273.60 68.31 270.50 78.82 273.54 88.44 C 274.39 91.28 276.62 93.61 279.36 94.71 C 288.28 98.60 298.56 96.58 307.45 100.58 C 310.41 101.97 312.32 105.01 312.36 108.28 C 314.10 131.28 305.41 153.92 292.57 172.66 C 283.39 185.84 272.24 197.87 258.68 206.66 C 236.86 220.77 210.61 226.11 184.96 227.17 C 174.33 227.35 163.68 228.06 153.07 227.17 C 146.99 226.56 140.17 224.70 136.60 219.33 C 131.70 210.74 131.82 200.46 132.27 190.89 C 133.16 171.85 134.93 152.54 141.46 134.50 C 147.98 115.64 159.29 98.46 174.28 85.27 C 192.18 69.14 214.50 57.22 238.54 53.89 Z" 
 
    /> 
 
    <path id="svgspine" d=" M 273.33 92.20 C 273.84 92.35 274.88 92.65 275.39 92.80 C 271.04 106.15 262.39 117.73 252.21 127.23 C 245.23 134.25 238.16 141.26 230.01 146.95 C 220.43 154.24 209.84 159.99 199.02 165.20 C 191.88 168.52 186.16 174.09 180.76 179.69 C 173.54 187.94 168.46 197.87 160.80 205.75 C 154.38 212.01 146.82 216.96 139.02 221.31 C 137.69 220.37 137.65 219.57 138.90 218.94 C 143.54 216.35 148.01 213.49 152.21 210.23 C 163.70 202.21 170.01 189.31 178.67 178.68 C 184.55 172.81 190.49 166.69 198.11 163.10 C 213.73 155.96 228.45 146.73 241.11 135.10 C 245.70 130.69 250.19 126.18 254.78 121.78 C 262.78 113.26 269.72 103.41 273.33 92.20 Z" 
 
    /> 
 
    </svg>

來源

2015-10-16 Hideto

Cx和Cy限定徑向漸變的中心點。

<?xml version="1.0" encoding="UTF-8" ?> 
 

 
    <svg width="347pt" height="366pt" viewBox="0 0 347 366" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
     <radialGradient id="gradpetal" gradientUnits="userSpaceOnUse" cx="40%" cy="60%"> 
 
     <stop stop-color="#ffdcfd" offset=".01" /> 
 
     <stop stop-color="#ff94dd" offset="0.15" /> 
 
     <stop stop-color="#ff92dd" offset="0.17" /> 
 
     <stop stop-color="#feadef" offset=".32" /> 
 
     <stop stop-color="#fec3ff" offset=".49" /> 
 
     <stop stop-color="#fec3ff" offset=".8" /> 
 
     <stop stop-color="#fe9bee" offset="1" /> 
 
     </radialGradient> 
 
    </defs> 
 
    <path id="svgmoon" d=" M 125.71 4.83 C 132.21 2.77 139.01 1.97 145.66 0.59 C 133.00 9.73 120.78 19.62 110.14 31.11 C 95.76 46.55 84.01 64.51 76.14 84.11 C 58.65 127.32 60.32 176.94 76.88 220.16 C 82.95 234.74 89.81 249.48 101.01 260.89 C 110.02 269.31 119.13 277.77 129.66 284.30 C 148.41 296.68 169.88 304.84 192.02 308.51 C 216.22 312.44 241.09 311.13 265.04 306.14 C 286.12 301.57 306.41 293.94 325.81 284.60 C 332.75 280.95 339.69 277.31 346.63 273.65 C 338.54 285.17 330.90 297.05 321.77 307.80 C 309.52 322.73 294.55 335.51 277.40 344.48 C 247.85 359.93 213.98 364.68 181.02 365.43 C 146.84 365.46 112.77 355.39 83.93 337.08 C 54.54 318.15 30.44 290.79 16.33 258.74 C 7.91 239.92 2.64 219.67 0.89 199.12 C 0.42 190.44 0.54 181.74 0.82 173.06 C 3.04 133.90 17.63 95.66 41.68 64.69 C 63.28 37.42 92.09 14.92 125.71 4.83 Z" 
 
    /> 
 
    <path id="svgpetal" fill="url(#gradpetal)" d=" M 238.54 53.89 C 246.99 52.67 255.63 52.63 264.04 54.18 C 266.61 54.66 269.01 56.33 269.99 58.80 C 273.60 68.31 270.50 78.82 273.54 88.44 C 274.39 91.28 276.62 93.61 279.36 94.71 C 288.28 98.60 298.56 96.58 307.45 100.58 C 310.41 101.97 312.32 105.01 312.36 108.28 C 314.10 131.28 305.41 153.92 292.57 172.66 C 283.39 185.84 272.24 197.87 258.68 206.66 C 236.86 220.77 210.61 226.11 184.96 227.17 C 174.33 227.35 163.68 228.06 153.07 227.17 C 146.99 226.56 140.17 224.70 136.60 219.33 C 131.70 210.74 131.82 200.46 132.27 190.89 C 133.16 171.85 134.93 152.54 141.46 134.50 C 147.98 115.64 159.29 98.46 174.28 85.27 C 192.18 69.14 214.50 57.22 238.54 53.89 Z" 
 
    /> 
 
    <path id="svgspine" d=" M 273.33 92.20 C 273.84 92.35 274.88 92.65 275.39 92.80 C 271.04 106.15 262.39 117.73 252.21 127.23 C 245.23 134.25 238.16 141.26 230.01 146.95 C 220.43 154.24 209.84 159.99 199.02 165.20 C 191.88 168.52 186.16 174.09 180.76 179.69 C 173.54 187.94 168.46 197.87 160.80 205.75 C 154.38 212.01 146.82 216.96 139.02 221.31 C 137.69 220.37 137.65 219.57 138.90 218.94 C 143.54 216.35 148.01 213.49 152.21 210.23 C 163.70 202.21 170.01 189.31 178.67 178.68 C 184.55 172.81 190.49 166.69 198.11 163.10 C 213.73 155.96 228.45 146.73 241.11 135.10 C 245.70 130.69 250.19 126.18 254.78 121.78 C 262.78 113.26 269.72 103.41 273.33 92.20 Z" 
 
    /> 
 
    </svg>

來源

2015-10-16 10:01:41

謝謝！我對所有這些都是陌生的，感到很蠢，我沒有那樣做。乾杯! – Hideto

SVG填充不正確

回答

相關問題