0

这应该是 SVG 的样子

在此处输入图像描述

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

在此处输入图像描述

这就是它们嵌入页面的方式

.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>
4

3 回答 3

1

虽然 android 从 3.0+ ( http://caniuse.com/svg ) 版本开始支持 svg，但它支持

SVG Basic 1.1 的子集

根据SVG parsing and rendering for Android tutorial，（实际上讲的是android SVG库）。

如果您跳到如何准备矢量图像部分，您将看到 SVG Basic 不支持的功能列表，例如动画，以及保存到 SVG Basic 1.1 配置文件的建议。

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

于 2013-05-14T10:54:29.413 回答
1

如果您在一年半后仍在与此作斗争（或者如果其他人在这里追逐类似的错误）：

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

于 2014-11-19T16:33:41.663 回答
0

我建议尝试几件事：

尝试简化 CSS。

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

一些 SVG 解析器在密集路径定义方面存在问题。因此，请尝试简化它们：

  • 负坐标前的空格：“c4.441-6.302”->“c4.441 -6.302”
  • 分数前的零：“19.242.369-2.48.794-5.005”->“19.242 0.369 -2.48 0.794 -5.005”
于 2013-05-19T18:12:57.500 回答