Question

这不是有关在html正文中处理svg标签的问题，而是关于file.svg内容的使用方式，如
<img src="file.svg" type="image/svg+xml">
在Adobe Illustrator中，我创建了一些图形设计，然后包括一些矩形区域，我需要向它们添加超链接。
导出为svg会创建文件，但缺少每个矩形属性中定义的超链接。
我在问如何手动操作。
使用代码编辑器，我看到AI添加了一个xlink引用，但没有使用它来构建超链接。
我读过，只有在html正文中使用扩展的svg脚本才有可能。我测试了将xlink添加到这些矩形，并且每个矩形都显示了链接。
当我必须使用<img src="file.svg" type="image/svg+xml">
时不是这种情况我需要在其中添加它们（我也以这种方式检查，以防万一，未成功）

这是我的file.svg的简化版
我想向最后一个rect

添加超链接。

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 344.92 164">
<defs>
<style>
  .cls-1 {
    fill: url(#linear-gradient);
  }

  .cls-2 {
    fill: #108daa;
  }
</style>
  <linearGradient id="linear-gradient" y1="82" x2="344.92" y2="82" gradientUnits="userSpaceOnUse">
  <stop offset="0" stop-color="#00a651"/>
  <stop offset="1"/>
  </linearGradient>
</defs>
  <rect class="cls-1" width="344.92" height="164"/>
  <rect class="cls-2" x="89" y="50.5" width="174.5" height="67"/>
</svg>

Answer 1

您可以以类似于HTML的方式在SVG中创建链接。您使用<a>元素。

然后，您需要使用Robert建议的方法之一嵌入SVG。

svg a {
  cursor: pointer;
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 344.92 164">
<defs>
<style>
  .cls-1 {
    fill: url(#linear-gradient);
  }

  .cls-2 {
    fill: #108daa;
  }
</style>
  <linearGradient id="linear-gradient" y1="82" x2="344.92" y2="82" gradientUnits="userSpaceOnUse">
  <stop offset="0" stop-color="#00a651"/>
  <stop offset="1"/>
  </linearGradient>
</defs>
  <rect class="cls-1" width="344.92" height="164"/>
  <a xlink:href="/"><rect class="cls-2" x="89" y="50.5" width="174.5" height="67"/></a>
</svg>

如何在.svg文件中使形状可点击

1 个答案: