javascript - 在标记图标中使用带有参数的 svg

Question

我有一个 svg 文件，它接受参数来旋转自己，并且在 html 的对象标记中使用此语法可以正常工作:

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

但如果我尝试将其用作图标，则不起作用，仅显示默认图像标题。

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

或

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

或

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

这不是缓存问题，如果我检查生成的 html 代码，我可以看到指向图像的完整 url:

<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;">

我错过了什么？，我想在任何程度上干净地旋转图标。谢谢。

PD:如果我在生成的代码中点击新 chrome 选项卡中的图像链接，我可以看到带有正确标题的图像，并且 url 映射到:

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

但仅适用于 map 。

Answer 1

出于隐私原因，如果您将 SVG 用作图像，即您通过 SVG 引用它 <image>标签，一个 HTML <img>标记或作为背景图像然后 amongst other things , javascript 将被禁用。