Using a svg with params in a marker icon

Question

I have a svg file that accept parameters to rotate himself and it works fine using this syntax in an object tag in html:

<object id="myicon" data="../static/images/icons/icon.svg?trans=rotate(75 16 16)" type="image/svg+xml"></object>

But if I try to use it like an icon, doesn't work, showing only the default image heading.

markers[0].set("icon", "../static/images/icons/icon.svg?trans=rotate(75 16 16)")

or

markers[0].setIcon("../static/images/icons/icon.svg?trans=rotate(75 16 16)")

or

markers[0].setIcon("../static/images/icons/icon.svg?trans=rotate(75+16+16)")

It isn't a cache problem, if I inspect the html code generated I can see the complete url pointing to the image:

<img src="../static/images/icons/icon.svg?trans=rotate(75 16 16)" draggable="false" style="position: absolute; left: 0px; top: 0px; -webkit-user-select: none; width: auto; height: auto; border: 0px; padding: 0px; margin: 0px;">

What am I missing?, I want rotate the icon cleanly in any degree. Thanks.

PD: If I follow the image link in a new chrome tab from the generated code I can see the image with the right heading and the url is mapped to:

/images/icons/icon.svg?trans=rotate(75%2016%2016) 

but works away of a map only.

Answer 1

For privacy reasons if you use SVG as an image i.e. you reference it via an SVG <image> tag, an HTML <img> tag or as a background image then amongst other things, javascript will be disabled.