拉斐尔元素中的重复图案

发布于 2024-10-30 03:09:27 字数 92 浏览 5 评论 0原文

有没有办法将重复图案作为拉斐尔元素的背景？

特别是，我可以在填充颜色上叠加半透明的 .png 吗？（或者另一种选择可能是为图像设置剪辑路径（不是矩形））

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

默嘫て 2024-11-06 03:09:27

以下是使用中继器图案作为背景的 SVG 解决方案。您可以从那里开始工作。

首先创建一个模式并在该模式中放置图像。为该模式提供一个 ID，并在 fill 中使用该 ID 作为 IRI需要平铺的形状的值。

要也有默认背景，您只需要在其后面有另一个与您想要的背景相同的形状。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 800 400" 
    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="myTile" patternUnits="userSpaceOnUse"
             x="0" y="0" width="20" height="20"
             viewBox="0 0 20 20" >
      <image x="0" y="0" width="20px" height="20px" xlink:href="tile.png" />
    </pattern> 
  </defs>

  <rect x="0" y="0" fill="Red" width="800" height="400">
  </rect>
  <ellipse fill="url(#myTile)" stroke="black" stroke-width="5"  
        cx="400" cy="200" rx="350" ry="150" />
</svg>

警告：运行上面的示例可能会伤害您的眼睛。

Here's the SVG solution to having a repeater pattern as background. You can work your way from there.

First of all create a pattern and in that pattern put the image you want to repeat. Give an ID to that pattern and use that ID as an IRI in the fill value of your shape that needs tiling.

To also have a default background you only need to have another identical shape behind it with the background you'd like.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 800 400" 
    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="myTile" patternUnits="userSpaceOnUse"
             x="0" y="0" width="20" height="20"
             viewBox="0 0 20 20" >
      <image x="0" y="0" width="20px" height="20px" xlink:href="tile.png" />
    </pattern> 
  </defs>

  <rect x="0" y="0" fill="Red" width="800" height="400">
  </rect>
  <ellipse fill="url(#myTile)" stroke="black" stroke-width="5"  
        cx="400" cy="200" rx="350" ry="150" />
</svg>

Warning: Running the example above may hurt your eyes.

回复收藏 0 原文

~没有更多了~