将 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.