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

Question

所以我正在研究一些背景和SVG的实验，并希望有一个指向左边的大（附加）三角形。我想保持点1固定在它的位置，同时允许三角形的另外两个后点与页面一起拉伸，因为一个向右拖动它。所以在我看来，这意味着将第1点作为固定位置，将第2点和第3点视为相对定位，但如果可以将CSS应用于路径中的特定点，我就不会这样做。

我愿意采取任何方式解决这个问题。

谢谢！

Answer 1

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

您需要做的就是将SVG设置为preserveAspectRatio="none"，以便其内容可以扩展到适合它所在的容器。

＆＃13;

＆＃13;

div
{
  padding-left: 200px;
}

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

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;