svg 矩形填充背景图像性能问题

Question

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

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

它有效，但性能急剧下降 dropped.I 我在 36 个矩形上应用。任何建议都会很有帮助。

可以在以下link.

中找到解释场景的图片

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

谢谢。

Answer 1

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

下面是如何使用面具塑造 "brick" 形状的示例。在您的情况下，您可以用 "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>

svg 矩形填充背景图像性能问题

svg rect fill background image performance issue

performance

svg

background

image

rect