我可以通过CSS指定折线的点吗

Answer 1

function setPointsOnPoly(pointList, elemId) {
  obj = document.getElementById(elemId);
  obj.setAttribute("points", pointList);
}

function removePoints(elemId) {
  obj = document.getElementById(elemId);
  obj.removeAttribute("points");
}

setPointsOnPoly('35,35 40,50 70,10', 'polyCheck');

<svg width='80px' height='80px'>
 <rect width='80' height='80' fill='none' stroke='black'></rect>
  <polyline id="polyCheck" fill="none"  stroke="black" stroke-width='2'></polyline>
</svg>
<button onclick="setPointsOnPoly('35,35 40,50 70,10', 'polyCheck');">Set Check</button>
<button onclick="removePoints('polyCheck');">Remove Check</button>

我会在 javascript 中执行此操作，这将非常接近您在 CSS 端所需的输入。

如果您想进一步阅读如何通过 CSS 实际完成所有这些操作，我建议您阅读这里。

提供的链接基本上使用 jQuery，但这对您来说应该感觉更舒服一些，因为它通过与 CSS 相同的语法访问元素。

Answer 2

将两条折线放入 . 并在风格上将他们的“笔画”切换为“无”。 “一般的英雄总是会走弯路”。