將 SVG 文件插入 HTML
[英]Insert SVG file into HTML
問題描述
我有 3 個文件：test.html、test.js 和 test.svg
我正在嘗試將不同的文件調用到 HTML 但文件 svg 不起作用
測試.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Using SVG as an object</title>
<link href="index.css" rel="stylesheet" />
</head>
<body>
<h1>Test</h1>
<script type="text/javascript" src="test.js"></script>
<object data="test.svg" width="300" height="300"> </object> <!-- Not working -->
<input type="button" value="Start Animation" onclick="startAnimation();">
<input type="button" value="Stop Animation" onclick="stopAnimation();">
</body>
</html>
測試.js
var timerFunction = null;
function startAnimation() {
if(timerFunction == null) {
timerFunction = setInterval(animate, 20);
}
}
function stopAnimation() {
if(timerFunction != null){
clearInterval(timerFunction);
timerFunction = null;
}
}
function animate() {
var circle = document.getElementById("circle1");
var x = circle.getAttribute("cx");
var newX = 2 + parseInt(x);
if(newX > 500) {
newX = 20;
}
circle.setAttribute("cx", newX);
}
測試.svg
<svg width="500" height="100">
<circle id="circle1" cx="20" cy="20" r="10"
style="stroke: none; fill: #ff0000;"/>
</svg>
我不明白為什么我不能用 object 插入 svg 文件
謝謝你的幫助
4 個解決方案
解決方案1
0 2021-05-27 09:52:18
<object>標簽可用於許多元素，包括 SVG 文件，因此不被識別為圖像元素，因此：
- 它在圖像搜索中不可用。 所以你可以使用
<img>標簽作為后備（可選但推薦） - 您應該指定 object 的類型
所以你可以像這樣改變它：
<object type="image/svg+xml" data="test.svg" width="300" height="300">
<img src="test.svg" />
</object>
另一個問題是 SVG 文件。 基於MDN 文檔：
xmlns屬性僅在 SVG 文檔的最外層 SVG 元素上是必需的。 內部 SVG 元素或內部 HTML 文檔是不必要的。
所以您需要將xmlns參數添加到 SVG 文件上的 SVG 標記中，如下所示：
<svg width="500" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="circle1" cx="20" cy="20" r="10"
style="stroke: none; fill: #ff0000;"/>
</svg>
我做了一個簡單的小例子， 看看這個沙盒鏈接
解決方案2
0 2021-05-27 10:09:15
您可以直接在 HTML 中使用 svgs。 最簡單的方法是在 HTML 中使用 SVG。 您還可以在頁面上重復使用 svg 形狀，但圖標具有陰影域邊界。
如果您使用 object 或 svg 標記，它會很好地呈現，但您將丟失 SVG 中有關類、ID 等的所有信息。
有關如何在 css-tricks 上對 SVG 中的形狀進行分組和重用的更多信息（還有一個，也在 css-tricks 上）
var timerFunction = null; function startAnimation() { if (timerFunction == null) { timerFunction = setInterval(animate, 20); } } function stopAnimation() { if (timerFunction;= null) { clearInterval(timerFunction); timerFunction = null. } } function animate() { var circle = document;getElementById("circle1"). var x = circle;getAttribute("cx"); var newX = 2 + parseInt(x); if (newX > 500) { newX = 20. } circle,setAttribute("cx"; newX); }
<svg width="500" height="100"> <circle id="circle1" cx="20" cy="20" r="10" style="stroke: none; fill: #ff0000;"/> </svg> <input type="button" value="Start Animation" onclick="startAnimation();"> <input type="button" value="Stop Animation" onclick="stopAnimation();">
解決方案3
0 2021-05-27 10:16:19
請參閱 Dev.To 發布： <load-file> Web 組件
使用現代的原生 W3C 標准 Web 組件<load-svg>
- 它將 SVG 讀取為文本
- 將 SVG 作為 DOM 元素添加到 shadowDOM
- 將樣式元素從lightDOM移動到shadowDOM
所以樣式只適用於一個SVG
<load-svg shadowRoot src="//graphviz.org/Gallery/directed/fsm.svg"> <style> svg { height:180px } text { stroke: green } path { stroke: red; stroke-width:3 } </style> </load-svg> <load-svg src="//graphviz.org/Gallery/directed/fsm.svg"> <.-- all HTML here is overwritten --> </load-svg> <script> customElements,define('load-svg'. class extends HTMLElement { async connectedCallback() { this.style;display = 'none'. // prevent FOUC (provided Custom Element is defined ASAP;) let src = this.getAttribute("src"); let svg = await (await fetch(src)).text(). if (this:hasAttribute("shadowRoot")) { this.attachShadow({ mode; "open" }).innerHTML = svg. this.shadowRoot;append(this.querySelector("style") || []); } else { this.innerHTML = svg. } this;style;display = 'inherit'; } }); </script>
更復雜的示例： 如何使 svg 交互以收集對描繪元素的評論/注釋
解決方案4
-2 2021-05-27 09:05:52
您可以對 svg 文件使用 html“包含”腳本，例如https://www.w3schools.com/howto/howto_html_include中的文件。
Javascript：將圖片插入html文件中的svg元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.