Question

我有两对SVG模式和符号。符号成立，SVG和图案形成它。我使用每个模式作为圆形的填充。

这种方法在chrome中运行良好，但在边缘只有一些svgs在圆圈中渲染。下面是一个例子，在chrome上你应该看到鞋子和钻石。在边缘只有钻石呈现即使你的方法与鞋子相同。

<svg width="660" height="600">
  <defs>

<symbol xmlns="http://www.w3.org/2000/svg" id="symbol-shoe" viewBox="0 0 45 45">
  </svg>
  ....SVG code 
  </svg>

<symbol xmlns="http://www.w3.org/2000/svg" id="symbol-diamond" viewBox="0 0 45 45">
 <svg> 
    ....SVG code 
 </svg>
</symbol>

  <pattern id="pattern-diamond" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
    <use xmlns="http://www.w3.org/2000/svg" x="6.59" y="6.59" width="31.819" height="31.819" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-diamond" />

  <pattern id="pattern-shoe" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">    
      <use xmlns="http://www.w3.org/2000/svg" x="6.59" y="6.59" width="31.819" height="31.819" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-shoe" />
  </pattern>

</defs>

<circle fill="url(#pattern-shoe)" cx="150" cy="150" r="60" />

<circle fill="url(#pattern-diamond)" cx="150" cy="400" r="60" />

边缘不渲染SVG符号

0 个答案: