我需要使用 javascript 創建 html，并且我想向我的 svg viewBox 添加一個帶有多邊形的錨點
var createHtml = () => {
const svg = document.querySelector('svg');
var svgNS = svg.namespaceURI;
for (let index = 0; index < 10; index ) {
var link = document.createElement("a");
var poly = document.createElement("polygon");
poly.setAttribute("opacity", 1);
poly.setAttribute("points", [0, 0, 0, 500, 500, 500, 500, 0]);
link.appendChild(poly);
svg.appendChild(link);
}
}
createHtml();<html>
<head>
</head>
<body>
<figure id="imagemap">
<svg id="box" viewBox="0 0 1700 1020">
</svg>
</figure>
<script src="main.js"></script>
</body>
</html>通過此設定，我可以在檢查 chrome 工具中看到 html，但它沒有顯示在我的 viewBox 中。例如，僅當我使用“更改為 html”更改不透明度時，它才會顯示。
為什么它只會在更改為“更改為 html”的內容后才會顯示，因為雙擊不會導致任何更改？ http://jsfiddle.net/n4poxL0a/2/
uj5u.com熱心網友回復：
您必須正確使用 SVG 命名空間中的元素。此外，如果您想在單擊 SVG 影像時轉到其他頁面，只需添加一個單擊事件偵聽器并在偵聽器內進行重定向。
var createHtml = () => {
var svg = document.getElementById("imagemap");
//console.log(svg);
//var svgNS = svg.namespaceURI;
for (let index = 0; index < 10; index ) {
var svgImg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgImg.setAttribute("id", "box" index);
svgImg.setAttribute("viewBox", "0 0 1700 1020");
svgImg.setAttribute("onclick", "myFunction(event)");
//svgImg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
var poly = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
poly.setAttribute("opacity", 1);
poly.setAttribute("points", [0, 0, 0, 500, 500, 500, 500, 0]);
poly.setAttribute("stroke-color", "black");
poly.setAttribute("stroke-width", "1");
//console.log(poly);
svgImg.appendChild(poly);
svg.appendChild(svgImg);
}
};
window.onload = function() {
createHtml();
};
function myFunction(event) {
alert("hello");
}<!DOCTYPE html>
<html>
<body>
<figure id="imagemap">
</figure>
</body>
</html>uj5u.com熱心網友回復：
標簽在 svg 中是不同的，它以某種方式只能在使用檢查工具后識別它。所以如果你想創建和 svg 標簽，你需要應用名稱標簽（我認為）
var link = document.createElement("a");
到
var link = document.createElement("http://www.w3.org/2000/svg", "a");
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/363298.html
標籤：javascript html 谷歌浏览器 锚 产生
上一篇：如何在Cordova/Ionic專案中添加Android意圖以打開谷歌地圖？
下一篇：CSS在Safari上變得凌亂