CODEWITHSUNDEEP
htmlcsssvgpolyline
Владимир Владимирович
Владимир Владимирович

Reputation: 131

Can I specify the points for polyline through CSS?

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>

Can I set the polylines through CSS?

Upvotes: 2

Views: 2662

Answers (2)

herrstrietzel
herrstrietzel

Reputation: 17285

Update 2024: SVG presentation attributes

As commented by Temani Afif (2018) – the SVG <polygon> related points attribute is to this date not included in the list of presentation attributes.
So you can't control it by CSS rules.

What about d path data?

Theoretically, you could easily replace your <polygon> with a <path> element controlling the d path data via CSS path() function like so:

svg:hover
.polyline{
    d: path('M 35,35 40,50 70,50');
}
<h3>Hover me</h3>
<svg width='80px' height='80px'>
 <rect width='80' height='80' fill='none' stroke='black'></rect>
  <path class="polyline" d="M35,35 40,50 60,10" fill="none"  stroke="black" stroke-width='2' />
</svg>

You can convert any polygon points to a d attribute by prepending a "M".

The previous example should work fine in Firefox and any Chromium/blink based browser unfortunately ...

While Firefox and Chromium has implemented the SVG working group specs to support the d attribute as a stylable CSS property some years ago, webkit is still lagging behind. See caniuse statistics.

This is a bummer mainly due to the significance of Apple devices running Safari's webkit implementations exclusively (BTW. you can also reproduce this missing property support running a webkit browser like Web/Epiphany or Midori on a Linux system)

Will the points attribute become stylable?

Maybe?! However, it will also take some time until we as developers can safely use it.

All in all: we can't always rely on officially specified SVG presentation attributes.
As a workaround you may deploy SVG SMIL or JavaScript

const polygon= document.queryselector('polygon')
polygon.setAttribute('points', '35 35 40 50 70 50')

See also: "Transitioning SVG Line Position" (about transitioning line x1, y1, x2, y2 attributes – also explaining a SMIL approach)

Upvotes: 3

Rick Riggs
Rick Riggs

Reputation: 336

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.

Upvotes: 2

Related Questions