Question

我花了一些时间来弄明白，所以我将在这里为其他感兴趣的人描述：

我想用SVG替换我的网页组合图像（我是设计师），这样文件大小合理，同时图像在高清屏幕上看起来也不错。

我的许多图像都有一些位图部分和一些矢量部分，因此必须将两者合并为一个SVG。

我遇到了三个主要问题：

1）从Illustrator导出的SVG在使用HTML页面中的<img>标记显示时会失去位图艺术。

2）当使用带有<object>标记的SVG时，onclick等鼠标事件不再有效。

3）使用带有<object>标记的SVG时，iPad上的iOS无法正确缩放图像。只调整容器大小 - 实际图像保持不变。

Answer 1

为了使用带有嵌入式位图图像的 SVG （例如，放置了PNG图像的Illustrator文件），我不得不使用：

<object data="yourimage.svg" type="image/svg+xml"></object>

WebKit（Google Code report）中存在一个已知错误，可防止<img>标记中的SVG显示位图组件。

为了在SVG中捕获鼠标事件，我打开了Illustrator SVG本身并在</svg>之前添加了一个新行：

<rect id="mynewobjectid" onclick="top.myjavascriptfunction(evt)" 
cursor="pointer" pointer-events="visible" fill="none"
width="1536" height="1536"/>

我从SVG第5行的<svg>标签获得了宽度和高度，但这次我没有添加“px”。我不认为这会有所作为。

pointer-events =“visible”是必要的，以便空矩形捕获鼠标事件。

html文档中的javascript函数如下所示：

function myjavascriptfunction(evt){alert(evt.target.id)}

结果是一个漂亮的图像，看起来像一个链接，并在我点击它时给我一个带有对象ID的警报。

请注意，我还将光标更改为手，以便使用cursor="pointer"

将链接的图像显示为可见

感谢David Dailey提供了简单易用的解决方案。

[关于iOS问题的更新] 事实证明，默认情况下，iPad上的iOS 7.0拒绝正确调整<object>标签的大小（它会调整对象边界的大小，但不会调整所附图像的大小）。

解决方法是将SVG文件开头的SVG标记中的宽度和高度从原始像素值更改为100％。 ozake.com处的示例