Can I alternate my SVG viewBox property using CSS?

Question

I have this SVG

<svg height="210" width="400" viewBox="0 0 100 100">
<path d="M150 0 L75 200 L225 200 Z"/></svg>

And I would like to change the viewBox property using CSS. It would probably look something like this. But I tried this and it does not work.

.svg {
  viewBox: "100 100 100 100";
}

I figured this is probably not possible but I am wondering what my next best option is to alternate this in a clean-easy way.

Answer 1

It seems that you are tackling the problem the wrong way. In your case, changing the viewBox like your are doing is equivalent to simply translate the path inside and this is something you can do with CSS:

 svg:first-of-type path { transform:translate(-100px,-100px); }

 <svg height="210" width="400" viewBox="0 0 100 100"> <path d="M150 0 L75 200 L225 200 Z" fill="red"/></svg> <svg height="210" width="400" viewBox="100 100 100 100"> <path d="M150 0 L75 200 L225 200 Z" fill="red"/></svg>