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

【问题标题】：How to apply CSS positioning to a specific point on an SVG path如何将 CSS 定位应用于 SVG 路径上的特定点
【发布时间】：2016-01-23 00:07:12
【问题描述】：

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

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

谢谢！

【问题讨论】：

“如果可以将 CSS 应用于路径中的特定点，我不会”...不，不是。它不是一个元素（他指出），因此 CSS 无法选择它（目前）
坦率地说，如果 SVG scaling 设置正确，您可以使用我期望的正常 bg 图像属性来执行此操作..

标签： css animation svg path

【解决方案1】：

你不能用 CSS 控制路径坐标，但是你可以控制 SVG 元素的大小和位置。

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

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>

【讨论】：

谢谢@Paul LeBeau，这绝对足以满足我想要实现的目标。非常感谢！