Можно ли указать точки для полилинии через CSS - PullRequest
Новая
       41

Можно ли указать точки для полилинии через CSS

0 голосов 

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

1 Ответ

0 голосов
/ 27 июня 2018 

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.

...