我可以将wp永久链接传递到svg文件吗

Question

我有一个英雄图像的svg文件，我希望某些路径是内部链接。我已经将路径封装在一个锚标记中，并且放入静态链接是可行的，但我希望它们是动态的，这样我就可以在wp管理中更改它们。这可能吗？如何将永久链接数据发送到svg文件？

下面的代码显示了我现在在svg文件中得到的内容。。。

<a href="/contact">
<path d="M137.46 267.676C162.545 267.676 182.88 247.34 182.88 222.256C182.88 197.171 162.545 176.836 137.46 176.836C112.375 176.836 92.04 197.171 92.04 222.256C92.04 247.34 112.375 267.676 137.46 267.676Z" fill="url(#paint2_linear_102_609)"/>
<path d="M137.46 259.306C157.922 259.306 174.51 242.718 174.51 222.256C174.51 201.794 157.922 185.206 137.46 185.206C116.998 185.206 100.41 201.794 100.41 222.256C100.41 242.718 116.998 259.306 137.46 259.306Z" fill="white"/>
</a>

但理想情况下，它看起来更像这样：

<a href="<?php echo $hero_link['url'];?>">
<path d="M137.46 267.676C162.545 267.676 182.88 247.34 182.88 222.256C182.88 197.171 162.545 176.836 137.46 176.836C112.375 176.836 92.04 197.171 92.04 222.256C92.04 247.34 112.375 267.676 137.46 267.676Z" fill="url(#paint2_linear_102_609)"/>
<path d="M137.46 259.306C157.922 259.306 174.51 242.718 174.51 222.256C174.51 201.794 157.922 185.206 137.46 185.206C116.998 185.206 100.41 201.794 100.41 222.256C100.41 242.718 116.998 259.306 137.46 259.306Z" fill="white"/>
</a>

Answer 1

您可以对SVG文件进行编码，为超链接提供id值，例如：

<a id="contact-link" href="/contact">

你可以用这样的HTML将它们加载到你的网页中。当您使用<object>加载svg文件时，页面中的Javascript可以访问这些文件，就好像它们是普通的HTML一样。(<img>并非如此。(

<object id="svg-display"
data="/my/svg/url.svg"
width="300" height="300"
></object> 

编写一些php，将超链接值传递到您的网页。

echo "<script>const svgContactUrl = {$hero_link['url']}</script>";

然后您可以编写一些Javascript来更改超链接。

/* Wait for the web page to load ...*/
document.addEventListener('DOMContentLoaded', function (event) {
/* ... when it is loaded find the svg object ... */
const svgDisplay = document.getElementById('svg-display')
/* ... and wait for it to load ... */
svgDisplay.addEventListener('load', function (event) {
/* ... then find the hyperlink in the svg ... */
const contactLink = svgDisplay.getElementById('contact-link')
/* ... and set its URL. */
contactLink.href = svgContactUrl
})
})

这种事情很难调试。(我没有调试它。(但它是自定义SVG文件内容的方式。

好消息是，一旦你通过了所有繁琐的事件编程，它就很强大，现在Internet Explorer已经被扔进了历史的垃圾箱，它一直属于它。