Question

这是我的徽标图片的PNG版本：

这是我在PC上看到的我的徽标SVG版本的屏幕截图：

这里有一个截图，说明在iPhone和Android手机上同样的SVG徽标：

发生了什么？为什么移动版看起来如此模糊，渐变不适用于粉红色的花瓣？

这是实际的SVG代码。（由于某些原因，该字体不会加载到代码段中，但它可以从我的网站上加载：http://www.cafenocturne.com/testpage/images/svg/CafeLogoFontSVG.svg

＆＃13;

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="http://www.cafenocturne.com/fonts/FontPorcelain.css" ?>
  <svg width="300px" height="300px" viewBox="-50 0 447 466" preserveAspectRatio="xMinYMin meet" style="overflow: visible" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g id="logo">
      <g id="petal">
        <defs>
          <radialGradient id="gradpetal" gradientUnits="userSpaceOnUse" cx="8rem" cy="14.5rem">
            <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=".55" />
            <stop stop-color="#ff94dd" offset=".85" />
            <stop stop-color="#ff94dd" offset="1" />
          </radialGradient>
        </defs>

        <path id="svgpetal" fill="url(#gradpetal)" stroke="url(#gradpetal)" stroke-width="2px" filter="url(#dropshadow)" 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"
        />

        <defs>
          <radialGradient id="gradspine" gradientUnits="userSpaceOnUse" cx="8rem" cy="14.5rem">
            <stop stop-color="#fe9bee" offset=".15" />
            <stop stop-color="#fec3ff" offset=".20" />
            <stop stop-color="#fec3ff" offset=".32" />
            <stop stop-color="#feadef" offset=".39" />
            <stop stop-color="#ff92dd" offset="0.45" />
            <stop stop-color="#ff94dd" offset="0.5" />
            <stop stop-color="#ffdcfd" offset="1" />
          </radialGradient>
        </defs>

        <path id="svgspine" fill="url(#gradspine)" 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"
        />
      </g>

      <path id="svgmoon" fill="#FFFFFF" stroke="#000000" filter="url(#dropshadow)" 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"
      />

      <g id="text">
        <text style="font-family: PorcelainRegular; 
				font-size: 65px;
				stroke: #000000;
				fill: #ffffff;
				overflow: visible;
				filter: url(#dropshadow);">
          <tspan x="0" y="0">`</tspan>
          <tspan x="70" y="120">Cafe</tspan>
          <tspan x="-30" y="290">Nocturne</tspan>
        </text>
      </g>
      <defs>
        <filter id="dropshadow" width="250px" height="250px">
          <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" />
          <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
          <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
      </defs>

    </g>
  </svg>

＆＃13;

移动浏览器上的SVG看起来很奇怪

0 个答案: