Question

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

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

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

可以在以下链接中找到解释方案的图像。

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

感谢。

Answer 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>

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

1 个答案: