Chrome 打破 SVG 图案填充

Question

在最新版本的 Chrome 和 Safari 中查看此 SVG。

在 Safari 中，您会看到彩色填充。在 Chrome 中，填充不呈现。

关于如何修复此错误的任何想法？这似乎是最新 Chrome 版本 (https://code.google.com/p/chromium/issues/detail?id=452235)

的一个新错误

为简洁起见，我去掉了d坐标

<?xml version="1.0" standalone="no"?>
  <svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <linearGradient id="Gradient1">
        <stop offset="5%" stop-color="white"/>
        <stop offset="95%" stop-color="blue"/>
      </linearGradient>
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="5%" stop-color="red"/>
        <stop offset="95%" stop-color="orange"/>
      </linearGradient>

      <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
        <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
        <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
        <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
      </pattern>
    </defs>
    <g typename="Graphic" artname="PRAYING HANDS" min_size_x="0" min_size_y="0" size_locked="false" transform="matrix(1 0 0 1 100 100)"><g artname="PRAYING HANDS" data-artwork-id="1041" transform="">
      <title>Praying Hands</title>
      <g transform="matrix(1 0 0 -1 -2401 2972)" style="text-rendering:optimizeLegibility;shape-rendering:default;image-rendering:optimizeQuality" artname="PRAYING HANDS" data-artwork-id="1041">
        <path fill="url(#Pattern)" d="..." opacity="1"></path>
  </g>
</g>

<!-- outline -->
<g transform="matrix(1 0 0 -1 -2400.16 2971.63)" style="text-rendering:optimizeLegibility;
shape-rendering:default;
image-rendering:optimizeQuality" artname="PRAYING HANDS" data-artwork-id="1041">
<desc>Untitled</desc>
<path style="fill:purple;stroke:#000000;fill-rule: evenodd;stroke-width:0.000001" d="..." fill="none" opacity=""></path>
    </g>
  </g>
</svg>

Answer 1

这不知何故是由改造 to-be-filled 事物或它们的 parents 引起的，请尝试不使用它。对于我的情况，"scale(-1,1)" 导致了问题。我通过手动进行转换来解决这个问题，这对于 scale(-1,1) 来说很容易。在没有问题的地方平移和旋转。

干杯，凯

Answer 2

这是 Chrome 中的已知错误。

https://code.google.com/p/chromium/issues/detail?id=447707

看起来会在 Chrome 41.

中修复

Chrome 打破 SVG 图案填充

Chrome Breaks SVG Pattern Fills

svg