css - 如何将 CSS 定位应用于 SVG 路径上的特定点

Question

所以我正在研究一些背景和 SVG 的试验，并希望有一个指向左侧的大(附加)三 Angular 形。我想将点 1 固定在它的位置上，同时允许三 Angular 形的其他两个后点随着页面一起拉伸(stretch)，因为一个人将它向右​​拖动得更宽。所以在我看来，这意味着将点 1 作为固定位置，将点 2 和点 3 作为相对位置，但如果可以将 CSS 应用于路径中的特定点，我不会这样做。

我愿意接受任何解决这个问题的方法。

谢谢!

Answer 1

您无法使用 CSS 控制路径坐标，但可以控制 SVG 元素的大小和位置。

您需要做的就是将 SVG 设置为 preserveAspectRatio="none"，这样它的内容就会拉伸(stretch)以适应它所在的容器。

div
{
  padding-left: 200px;
}

svg
{
  width: 100%;
  height:200px;
}

<div>
  
  <svg viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0,50 100,0 100,100 Z" fill="#7be"/>
  </svg>

</div>