1

我有一个响应式 SVG 容器，我需要我<pattern>的出现在每种情况下。

我是说：

  • <pattern>三角形应以所有可能的宽度居中
  • 左边/右边的空间必须重复三角形<pattern>

这可能吗？我知道可以使用 JS 动态重新计算模式位置。但我想svg只使用属性来做到这一点。

.mySvg1 {
  width: 600px;
  height: 50px;
  border: 1px dotted red;
  margin-bottom: 16px;
}

.mySvg2 {
  width: 400px;
  height: 50px;
  border: 1px dotted red;
  margin-bottom: 16px;
}

.mySvg3 {
  width: 200px;
  height: 50px;
  border: 1px dotted red;
  margin-bottom: 16px;
}

span {
  font-weight: bold;
  color: red;
}

.myDiv1 {
  margin-bottom: 16px;
}
 <div class="myDiv1">
   SEE THAT THE TRIANGLE IS <span>NOT</span> CENTERED. I WOULD LIKE IT TO ALWAYS BE CENTERED
 </div>

<div>
  <svg class="mySvg1">
    <defs>
      <pattern 
        id="wave"
        width="150"
        height="50"
        patternUnits="userSpaceOnUse"
      >
        <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>
</div>

<div>
  <svg class="mySvg2">
    <rect x="0" y="0" width="100%" height="100%" fill="url(#wave)"/>
  </svg>
</div>

<div>
  <svg class="mySvg3">
    <rect x="0" y="0" width="100%" height="100%" fill="url(#wave)"/>
  </svg>
 </div>

额外的：

很容易做到这一点background-image。我只想使用相同的方法<svg>。这可能吗？

div {
  margin-bottom: 16px;
}

.myDiv1 {
  width: 600px;
  height: 50px;
  background-image: 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>');
  background-position: center;
}

.myDiv2 {
  width: 400px;
  height: 50px;
  background-image: 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>');
  background-position: center;
}

.myDiv3 {
  width: 200px;
  height: 50px;
  background-image: 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>');
  background-position: center;
}
<div>
  SEE THAT THE TRIANGLE IS ALWAYS CENTERED
</div>

<div class="myDiv1">
</div>

<div class="myDiv2">
</div>

<div class="myDiv3">
</div>

4

1 回答 1

2

这是您需要的想法：

  1. 考虑到路径的宽度（路径宽度的奇数乘数），为矩形设置一个大宽度
  2. 您使用百分比（乘数100/n在哪里）来制作图案的宽度。n你也删除patternUnits="userSpaceOnUse"
  3. 您放置rectat50%然后将其翻译回来以50%将其放在中间

换句话说，我们使矩形非常大，并将其置于 SVG 内部。奇数乘数是为了确保矩形的中心是三角形的中心，而不是两个三角形之间的中心。

.mySvg1 {
  width: 600px;
  height: 50px;
  border: 1px dotted red;
  margin-bottom: 16px;
}

.mySvg2 {
  width: 400px;
  height: 50px;
  border: 1px dotted red;
  margin-bottom: 16px;
}

.mySvg3 {
  width: 200px;
  height: 50px;
  border: 1px dotted red;
  margin-bottom: 16px;
}

span {
  font-weight: bold;
  color: red;
}

.myDiv1 {
  margin-bottom: 16px;
}

rect {
  transform:translate(-50%);
  transform-box:fill-box;
}
<div class="myDiv1">
   SEE THAT THE TRIANGLE IS <span>NOT</span> CENTERED. I WOULD LIKE IT TO ALWAYS BE CENTERED
 </div>

<div>
  <svg class="mySvg1">
    <defs>
      <pattern 
        id="wave"
        width="9.1%"
        height="50"
      >
        <path d="M 0 50 l 75 -50 l 75 50" stroke="black" stroke-width="2"/>
      </pattern>
    </defs>
    <rect x="50%" y="0" width="1672" height="100%" fill="url(#wave)" />
  </svg>
</div>

<div>
  <svg class="mySvg2">
    <rect x="50%" y="0" width="1672" height="100%" fill="url(#wave)"/>
  </svg>
</div>

<div>
  <svg class="mySvg3">
    <rect x="50%" y="0" width="1672" height="100%" fill="url(#wave)"/>
  </svg>
 </div>

于 2020-05-28T14:02:53.397 回答