svg rect 填充背景图像性能问题答案

【问题标题】：svg rect fill background image performance issuesvg rect 填充背景图像性能问题
【发布时间】：2015-06-28 00:46:58
【问题描述】：

我想绘制一个图像作为 SVG 矩形的背景。我做了如下，

<pattern id = "HappySmile" width="97" height="40" >
   <image width="97" height="30" xlink:href="resources/images/HappySmile.png"></image>
  </pattern>

它有效，但性能急剧下降。我正在申请 36 个矩形。任何建议都会非常有帮助。

可以在以下链接中找到解释该场景的图片。

http://i.stack.imgur.com/Jo6b2.png

谢谢。

【问题讨论】：

如果所有的“happysmile”矩形看起来都一样，你有没有与只有一个矩形并用元素引用它进行比较？
@ErikDahlström 嗨，Erik，我尝试使用，但没有发现任何变化。我这样做如下：

标签： image performance svg background rect

【解决方案1】：

如果模式对您来说太慢了。尝试改用<mask> 或<clipPath>。

以下是如何使用蒙版制作“砖”形的示例。在您的情况下，您可以用您的“HappySmile”图片替换我使用的示例。

<svg width="600" height="400">
  <defs>
    <mask id="lozenge">
      <circle cx="15" cy="15" r="15" fill="white"/>
      <rect x="15" y="0" width="67" height="30" fill="white"/>
      <circle cx="82" cy="15" r="15" fill="white"/>
    </mask>
    <image id="brick1" width="97" height="30" xlink:href="http://lorempixel.com/output/abstract-q-c-97-30-9.jpg" mask="url(#lozenge)"/>
  </defs>

  
  <use xlink:href="#brick1" x="50" y="50"/>
  <use xlink:href="#brick1" x="150" y="50"/>
  <use xlink:href="#brick1" x="250" y="50"/>
  <use xlink:href="#brick1" x="350" y="50"/>
  <use xlink:href="#brick1" x="450" y="50"/>

  <use xlink:href="#brick1" x="50" y="100"/>
  <use xlink:href="#brick1" x="150" y="100"/>
  <use xlink:href="#brick1" x="250" y="100"/>
  <use xlink:href="#brick1" x="350" y="100"/>
  <use xlink:href="#brick1" x="450" y="100"/>

  <use xlink:href="#brick1" x="50" y="150"/>
  <use xlink:href="#brick1" x="150" y="150"/>
  <use xlink:href="#brick1" x="250" y="150"/>
  <use xlink:href="#brick1" x="350" y="150"/>
  <use xlink:href="#brick1" x="450" y="150"/>

</svg>

【讨论】：

嗨，我正在尝试使用如下： JS : b.setAttribute('mask', "url(#HappySmile)");到目前为止没有运气
面具不是这样工作的。您将蒙版应用于图像。不是相反。
我添加了一个例子。