gpt4 book ai didi

html - 在较大的容器上水平重复 SVG 图案

转载 作者:行者123 更新时间:2023-12-01 23:59:40 29 4
gpt4 key购买 nike

我需要重复 svg <pattern>在水平方向 <rect> .

我的意思是,svg <rect>比图案大,所以我需要它在剩下的任何空间上水平重复。

我希望主要图案出现在中心,这正是现在正在发生的事情。我只需要让它在两边都重复。

现在,我只能让它显示一次。

enter image description here

注意:

  • 图案是黑色三 Angular 形
  • 1px dotted red边框来自 svg元素

.mySvg {
width: 600px;
height: 50px;
border: 1px dotted red;
}
<svg class="mySvg">
<defs>
<pattern id="wave" viewBox="0,0,150,50" width="100%" height="100%">
<path d="M 0 50 l 75 -50 l 75 50" stroke="black" stroke-width="2"/>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#wave)"/>
</svg>

如何让图案在剩余的空间上重复?

最佳答案

使用 SVG 作为背景:

.box {
height:50px;
border:1px solid red;
margin: 5px;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 -2 150 52"><path d="M 0 50 l 75 -50 l 75 50" stroke="black" /></svg>')
center/auto 100%;
}
<div class="box"></div>

<div class="box" style="height:100px;"></div>

关于html - 在较大的容器上水平重复 SVG 图案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62061689/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com