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

时间:2013-11-04 12:45:35

标签: javascript google-maps google-maps-api-3 svg

我有一个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选项卡中的图像链接,我可以看到带有正确标题的图像,并且网址映射到:

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

但仅限地图。

1 个答案:

答案 0 :(得分:1)

出于隐私原因,如果您将SVG用作图片,即通过SVG <image>标记,HTML <img>标记或背景图片amongst other things引用它,则javascript将为禁用。