我有一個英雄影像的 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>
uj5u.com熱心網友回復：
您可以對 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 已經進入了它一直屬于的歷史垃圾箱。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516163.html