如何使用 Adobe Illustrator 生成的 SVG，包括位图图像作为 onclick 链接答案

【问题标题】：How to use an Adobe Illustrator generated SVG including bitmapped image as a link with onclick如何使用 Adobe Illustrator 生成的 SVG，包括位图图像作为 onclick 链接
【发布时间】：2014-07-28 12:51:07
【问题描述】：

这花了我一段时间才弄清楚，所以我会在这里为其他感兴趣的人描述一下：

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

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

我遇到了三个主要问题：

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

2) 当使用带有<object> 标签的 SVG 时，onclick 等鼠标事件不再起作用。

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

【问题讨论】：

1.将位图转换为数据 URL 并将图像数据嵌入到 SVG 中。 2 使用 pointer-events:none 来解决这个问题。 3. 将其作为错误报告给产品的错误跟踪器。
这可行，但出于速度原因，我坚持单独加载位图图像——我希望 SVG 的矢量部分能够快速加载，并且分离位图图像会使 SVG 文件更小。我最终做的只是使用内联 SVG 代码而不是图像标签——在这种情况下，单独的位图可以正常工作。

标签： javascript jquery object svg bitmap

【解决方案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 中的示例

【讨论】：

code.google.com/p/chromium/issues/detail?id=234082 不是错误，它是保护您隐私的理想功能，因此我认为 Chrome 不太可能更改以允许它。例如，Firefox 肯定不会。
那个线程似乎已经死了。如果图像与 SVG 代码和宿主 HTML 文件位于同一服务器上，您能否解释它如何保护我的隐私以防止我在 SVG 中加载图像？
开放的重定向器使相同的服务器保证毫无意义。