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

Question

polyline{
  points: 35,35 40,50 70,50;
}


    

<svg width='80px' height='80px'>
 <rect width='80' height='80' fill='none' stroke='black'></rect>
  <polyline points="35,35 40,50 60,10" fill="none"  stroke="black" stroke-width='2'></polyline>
</svg>
      

请告诉我是否可以通过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 实际完成所有这些操作，我建议您阅读 HERE .

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