如何使用adobeillustrator生成的SVG，包括位图图像作为链接与onclick

How to use an Adobe Illustrator generated SVG including bitmapped image as a link with onclick

本文关键字：图像 位图 链接 onclick 包括 adobeillustrator 何使用 SVG      更新时间：2023-09-26

我花了一些时间才弄清楚，所以我将在这里描述它，供其他感兴趣的人使用:

我想用SVG代替我的web作品集图像(我是一名设计师)，这样文件大小就会合理，同时图像在高清屏幕上看起来也会很好。

我的许多图像都有一些位图部分和一些矢量部分，因此将两者组合成一个SVG是必不可少的。

我遇到了三个主要问题:

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

2) 当使用SVG的<object>标签时，鼠标事件如onclick不再工作

3) 当使用带有<object>标签的SVG时，iPad上的iOS将无法正确缩放图像。只有容器会被调整大小——实际的图像会保持不变。

为了使用SVG嵌入位图图像(例如，Illustrator文件放置PNG图像)，我必须使用:

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

WebKit中有一个已知的bug (Google Code报告)，它阻止SVG在<img>标签中显示位图组件。

为了在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%。示例

相关文章：