2

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>

Please tell me if I can set the polylines through css

Keith Walton
  • 5,211
  • 6
  • 39
  • 53
Владимир Владимирович
  • 131
  • 1
  • 7
  • not all the attribute are styling ones .. check here : https://www.w3.org/TR/SVG11/styling.html#SVGStylingProperties so you cannot set points with CSS like you can with fill for example – Temani Afif Jun 27 '18 at 15:28
  • No...you can't. – Paulie_D Jun 27 '18 at 15:41
  • No. If you really wanted to, you could use js to read the attribute of a "font-family" and bring that string of values into your DOM that way. It would be best to reconsider entirely why you're doing this. – fontophilic Jun 27 '18 at 15:49

1 Answers1

2

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>

I would do this in javascript, this would be pretty close the inputs you would need on the CSS side.

If you want to do further reading on how to actually do all of this from CSS, I recommend reading up HERE.

The link provided is basically using jQuery, but that should feel a little more comfortable to you, as it accesses elements via the same syntax as CSS.

Rick Riggs
  • 336
  • 2
  • 12