Question

我想在我的新网站上使用SVG而不是PNG。为此，我在Corel DRAW X6中创建了矢量绘图，将它们导出为SVG并将其作为object放在我的HTML文件中。他们在各地工作都很棒。但今天我开始解决响应问题，我偶然发现了这个恐怖（他）。

问题在于半透明渐变。以下是在Win和Android上比较股票浏览器和Chrome的屏幕截图：http://i.imgur.com/ZcSWcSs.jpg

我该怎么做才能防止这种情况发生？退回PNG？

SVG代码示例：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X6 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 5466 4646"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:#434242}
    .fil4 {fill:#727271}
    .fil3 {fill:#9D9E9E}
    .fil2 {fill:#B2B3B3}
    .fil1 {fill:#C5C6C6}
    .fil5 {fill:#00A0B0}
   ]]>
  </style>
 </defs>
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path class="fil0" d="M55 0l5357 0c30,0 55,25 55,55l0 3225 -5466 0 0 -3225c0,-30 25,-55 55,-55z"/>
  <path class="fil1" d="M5466 3280l0 765c0,30 -25,55 -55,55l-5357 0c-30,0 -55,-25 -55,-55l0 -765 5466 0z"/>
  <path class="fil1" d="M2099 4100c0,0 -74,323 -83,328 -9,5 -60,88 -183,129 -123,41 -56,89 183,89l713 0 0 0 1 0 0 0 2 0 0 0 1 0 0 0 713 0c239,0 306,-48 183,-89 -123,-41 -174,-124 -183,-129 -9,-5 -83,-328 -83,-328l-630 0 -4 0 -630 0z"/>
  <path class="fil2" d="M2099 4100c0,0 -15,65 -32,137l1329 0c-17,-72 -32,-137 -32,-137l-630 0 -4 0 -630 0z"/>
  <circle class="fil3" cx="2733" cy="3690" r="137"/>
  <circle class="fil4" cx="2733" cy="71" r="24"/>
  <rect class="fil5" x="137" y="137" width="5193" height="3007"/>
 </g>
</svg>

SVG渐变在Android 4股票浏览器上不起作用

0 个答案: