SVG无法在Android 4.x本机浏览器上正常显示

Question

这就是SVG应该是什么样子

这就是在Samsum Galaxy S3上的Android 4原生浏览器上SVG的样子

这是它们嵌入页面的方式

.petal  {

  -webkit-mask-image:url(../images/petal.svg);
  -webkit-mask-size: 100%;
  background-color:#fff;

  -webkit-transform-origin:50% 130%;
  -webkit-animation:petal-pulse .95s infinite linear;

}

知道如何解决这个问题吗？

更新：SVG

<svg xmlns="http://www.w3.org/2000/svg" width="116.448" height="200"><style type="text/css"><![CDATA[path{fill:none}.outline{stroke:#00568F;stroke-width:3.5;stroke-miterlimit:10}.fat{stroke-width:7}]]></style><path d="M43.25 18.923c4.441-6.302 9.258-9.885 14.321-9.885 5.025-.004 9.816 3.534 14.229 9.76 3.45-3.915 6.936-6.533 10.395-7.61-7.285-4.019-15.658-6.319-24.575-6.319-8.965 0-17.388 2.335-24.708 6.4 3.443 1.123 6.908 3.736 10.338 7.654z"/><path class="outline" d="M71.799 18.798c-4.413-6.226-9.204-9.765-14.229-9.76-5.062 0-9.879 3.583-14.321 9.885 4.909 5.612 9.712 13.898 14.23 24.331 4.538-10.516 9.377-18.844 14.32-24.456z"/><path class="outline" d="M71.799 18.798c4.335 6.104 8.281 14.895 11.704 25.829 4.728-8.408 9.503-15.25 14.182-20.234-4.219-5.369-9.469-9.882-15.491-13.205-3.459 1.078-6.944 3.696-10.395 7.61z"/><path class="outline" d="M68.816 76.342c4.705-12.085 9.654-22.765 14.688-31.714-3.423-10.934-7.369-19.726-11.704-25.829-4.943 5.612-9.782 13.939-14.32 24.456 4.085 9.422 7.905 20.569 11.336 33.087z"/><path class="outline" d="M43.25 18.923c-3.429-3.918-6.894-6.532-10.339-7.654-6.044 3.356-11.308 7.922-15.525 13.35 4.678 5.006 9.447 11.859 14.18 20.267 3.415-10.973 7.355-19.817 11.684-25.963z"/><path class="outline" d="M46.179 76.376c3.416-12.531 7.229-23.689 11.301-33.123-4.518-10.433-9.321-18.719-14.23-24.331-4.329 6.146-8.268 14.99-11.685 25.962 4.999 8.901 9.928 19.505 14.614 31.492z"/><path class="outline" d="M31.565 44.886c-4.733-8.407-9.502-15.26-14.18-20.267-5.626 7.237-9.37 16.007-10.423 25.603 5.606 8.07 11.294 17.646 16.892 28.49 2.071-12.692 4.678-24.083 7.711-33.826z"/><path class="outline" d="M19.783 113.863c.921-12.49 2.294-24.276 4.071-35.151-5.598-10.844-11.286-20.419-16.892-28.49-.202 1.852-.327 3.727-.327 5.63 0 15.453 2.105 30.24 5.347 44.071"/><path class="outline" d="M46.179 76.376c-4.686-11.988-9.614-22.592-14.614-31.491-3.033 9.743-5.64 21.134-7.71 33.826 5.027 9.726 9.949 20.43 14.662 31.938 2.203-12.229 4.782-23.717 7.662-34.273z"/><path class="outline" d="M33.888 142.3c1.247-10.959 2.802-21.542 4.629-31.65-4.713-11.508-9.635-22.212-14.662-31.938-1.777 10.875-3.15 22.661-4.071 35.151"/><path class="outline" d="M68.816 76.342c-3.431-12.518-7.251-23.665-11.336-33.088-4.072 9.433-7.885 20.592-11.301 33.123 4.008 10.269 7.821 21.514 11.335 33.547 3.5-12.044 7.298-23.303 11.302-33.582z"/><path class="outline" d="M49.664 140.655c2.37-10.674 5.006-20.943 7.85-30.731-3.514-12.033-7.327-23.278-11.335-33.548-2.879 10.555-5.459 22.044-7.662 34.273 3.897 9.51 7.633 19.548 11.147 30.006z"/><path class="outline" d="M44.505 167.272c1.2-7.216 2.531-14.535 4.113-22.01.329-1.561.705-3.06 1.046-4.607-3.514-10.458-7.25-20.496-11.147-30.006-1.827 10.108-3.382 20.691-4.629 31.65"/><path class="outline" d="M11.982 99.923c1.994 8.53 4.42 16.659 7.132 24.321.181-3.515.412-6.958.669-10.381"/><path class="outline" d="M19.783 113.863c-.257 3.423-.488 6.866-.669 10.381 4.127 11.685 8.812 22.211 13.441 31.315.244-2.836.467-5.653.768-8.532.167-1.598.384-3.137.565-4.728"/><path class="outline" d="M33.888 142.3c-.181 1.591-.398 3.13-.565 4.728-.3 2.879-.523 5.696-.768 8.532 3.765 7.405 7.467 13.944 10.73 19.242.369-2.48.794-5.005 1.22-7.529"/><path class="outline" d="M91.305 78.702c5.619-10.897 11.329-20.515 16.955-28.608-1.088-9.641-4.873-18.455-10.575-25.701-4.679 4.985-9.454 11.827-14.182 20.234 3.069 9.795 5.704 21.278 7.802 34.075z"/><path class="outline" d="M76.568 110.871c4.732-11.593 9.684-22.377 14.737-32.169-2.099-12.797-4.733-24.28-7.802-34.075-5.033 8.949-9.982 19.629-14.688 31.714 2.914 10.629 5.52 22.205 7.753 34.53z"/><path class="outline" d="M100.829 103.752c4.665-15.272 7.78-31.505 7.78-47.9 0-1.949-.133-3.866-.349-5.758-5.626 8.094-11.336 17.711-16.955 28.608 1.77 10.802 3.145 22.507 4.072 34.903"/><path class="outline" d="M95.377 113.605c-.928-12.396-2.303-24.101-4.072-34.903-5.054 9.792-10.005 20.576-14.737 32.169 1.812 10.04 3.374 20.54 4.622 31.408"/><path class="outline" d="M95.377 113.605c.124 1.673.25 3.331.362 5.026 1.848-4.825 3.54-9.802 5.089-14.88"/><path class="outline" d="M81.19 142.279c.181 1.583.397 3.116.563 4.713l.168 1.792c4.825-9.085 9.628-19.256 13.818-30.152-.112-1.695-.238-3.354-.362-5.026"/><path class="outline" d="M68.816 76.342c-4.004 10.279-7.802 21.539-11.302 33.582 2.879 9.858 5.542 20.204 7.934 30.961 3.499-10.465 7.23-20.49 11.12-30.014-2.233-12.325-4.839-23.901-7.752-34.529z"/><path class="outline" d="M81.19 142.279c-1.248-10.868-2.811-21.368-4.622-31.408-3.89 9.523-7.621 19.549-11.12 30.014.328 1.472.689 2.9 1.004 4.386 1.595 7.474 2.935 14.794 4.147 22.002"/><path class="outline" d="M49.664 140.655c.502 1.506 1.032 2.956 1.527 4.476 2.363 7.265 4.455 14.41 6.414 21.466 1.944-7.056 4.043-14.201 6.401-21.466.467-1.437.968-2.816 1.442-4.246-2.392-10.757-5.055-21.103-7.934-30.961-2.844 9.788-5.48 20.057-7.85 30.731z"/><path class="outline" d="M52.167 188.104c1.583-6.994 3.41-14.182 5.438-21.508-1.959-7.056-4.05-14.201-6.414-21.466-.495-1.52-1.025-2.97-1.527-4.476-.341 1.548-.718 3.047-1.046 4.607-1.582 7.475-2.913 14.794-4.113 22.01"/><path class="outline" d="M66.452 145.271c-.314-1.485-.676-2.914-1.004-4.386-.475 1.43-.976 2.81-1.442 4.246-2.357 7.265-4.457 14.41-6.401 21.466 1.429 5.172 2.762 10.276 3.975 15.288 2.285-3.235 4.976-7.222 7.946-11.893.348-.899.718-1.812 1.073-2.72-1.213-7.208-2.553-14.528-4.147-22.001z"/><path class="outline fat" d="M57.619 4.869c-28.158 0-50.983 22.832-50.983 50.983 0 74.868 47.895 135.542 47.895 135.542s54.079-66.634 54.079-135.542c-.001-28.151-22.833-50.983-50.991-50.983z"/></svg>

Answer 1

虽然android支持版本3.0+（http://caniuse.com/svg）的svg，但它支持

  

SVG Basic 1.1的子集

根据 SVG解析和渲染Android教程，（实际上讲的是关于android SVG库）。

如果您跳转到How to prepare your vector images部分，您会看到不受支持的SVG Basic功能列表，例如动画，以及保存到SVG Basic 1.1配置文件的建议。

SVG配置文件或可能使用不受支持的功能可能是导致问题的原因。

Answer 2

如果你在一年半之后还在争吵（或者如果其他人追逐类似的错误来到这里）：

我最近遇到的问题是三星Galaxy S3上的本机浏览器无法正确处理.svg图像。 （在我的情况下，它拒绝调整背景图像的大小;背景图像是一个精灵表，所以这是一个问题。）我的解决方案是将.svg转换为.png并使用它。我绝对建议任何在S3上追逐类似问题的人如果可能的话不要使用.svg图像。

Answer 3

我建议尝试一些事情：

尝试简化CSS。

• 删除CDATA标记
• 在规则之间添加一些空格或换行符

某些SVG解析器在密集路径定义方面存在问题。所以也尝试简化它们：

• 负坐标前的空格：“c4.441-6.302” - ＆gt; “c4.441 -6.302”
• 分数前的零：“19.242.369-2.48.794-5.005” - ＆gt; “19.242 0.369 -2.48 0.794 -5.005”