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相同的语法访问元素。

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

1 个答案: