Set SVG path data via CSS

Asked Jun 03 '17 at 18:03

Active Jun 03 '17 at 18:03

Viewed 127 times

I'm able to set some attribute values of a <path> element using CSS. However, I've been unable to get Chrome to recognise the d attribute in a stylesheet. Despite the fact it accepts it as a valid CSS identifier, I cannot find an accepted value. Is it possible to set the path data by through style? For example:

<svg width="100" height="100" viewBox="0 0 100 100">
  <!-- Background -->
  <rect width="100" height="100" fill="gray" fill-opacity="0.3" />
  <!-- Red triangle -->
  <path d="M 15 10 H 90 V 85 Z" style="stroke: red; fill: red; fill-opacity: 0.5;" />
  <!-- Green triangle -->
  <path style="d: M 10 15 V 90 H 85 Z; stroke: green; fill: green; fill-opacity: 0.5;" />
</svg>

asked Jun 03 '17 at 18:03

MTCoster

5,868
3
28
49

evtl. this [link](https://stackoverflow.com/questions/42227012/css-change-d-property-of-path) – Frank Wisniewski Jun 03 '17 at 18:20
@FrankWisniewski Thanks, somehow that didn't come up when I was searching for duplicates! – MTCoster Jun 03 '17 at 18:22

Set SVG path data via CSS

0 Answers0