将 SVG 文件插入 HTML
[英]Insert SVG file into HTML
问题描述
I've got 3 files: test.html, test.js and test.svg
我有 3 个文件：test.html、test.js 和 test.svg
I'm trying to call the different files into HTML but the file svg don't work我正在尝试将不同的文件调用到 HTML 但文件 svg 不起作用
test.html测试.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>
test.js测试.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);
}
test.svg测试.svg
<svg width="500" height="100">
<circle id="circle1" cx="20" cy="20" r="10"
style="stroke: none; fill: #ff0000;"/>
</svg>
I don't understand why I can't insert svg file with object我不明白为什么我不能用 object 插入 svg 文件
Thanks for your help谢谢你的帮助
4 个解决方案
解决方案1
0 2021-05-27 09:52:18
<object> tags can be used on many elements, including SVG files, and therefore not recognized as image elements, So: <object>标签可用于许多元素，包括 SVG 文件，因此不被识别为图像元素，因此：
- It's not available on image search.它在图像搜索中不可用。 So you can use an
<img>tag as fallback (optional but recommended)所以你可以使用<img>标签作为后备（可选但推荐） - You should specify the type of the object您应该指定 object 的类型
So you can change it like this:所以你可以像这样改变它：
<object type="image/svg+xml" data="test.svg" width="300" height="300">
<img src="test.svg" />
</object>
And another problem is the SVG file.另一个问题是 SVG 文件。 Based on MDN documents :基于MDN 文档：
The
xmlnsattribute is only required on the outermost SVG element of SVG documents.xmlns属性仅在 SVG 文档的最外层 SVG 元素上是必需的。 It is unnecessary for inner SVG elements or inside HTML documents.
so you need to add xmlns parameters to the SVG tag on SVG file like this:所以您需要将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>
I made a small simple example that works, checkout this sandBox link我做了一个简单的小例子， 看看这个沙盒链接
解决方案2
0 2021-05-27 10:09:15
You can use svgs directly in the HTML.您可以直接在 HTML 中使用 svgs。 Easiest is to just use the SVG inside the HTML.最简单的方法是在 HTML 中使用 SVG。 You can also re-use an svg shape on a page but then the icons have a shadow-dom boundary.您还可以在页面上重复使用 svg 形状，但图标具有阴影域边界。
If you use an object or svg tag, it will render just fine but you will lose all information about classes, IDs and so on in the SVG.如果您使用 object 或 svg 标记，它会很好地呈现，但您将丢失 SVG 中有关类、ID 等的所有信息。
Further Information on SVG on css-tricks关于 css-tricks 上 SVG 的更多信息
More information about how to group and re-use shapes in SVG on css-tricks ( and one more , also on css-tricks)有关如何在 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
See Dev.To Post: <load-file> Web Component请参阅 Dev.To 发布： <load-file> Web 组件
Use a modern, native W3C standard Web Component <load-svg>使用现代的原生 W3C 标准 Web 组件<load-svg>
- it reads the SVG as text它将 SVG 读取为文本
- adds SVG to shadowDOM as DOM element将 SVG 作为 DOM 元素添加到 shadowDOM
- moves the style element from lightDOM to shadowDOM将样式元素从lightDOM移动到shadowDOM
So style is only applied to one SVG所以样式只适用于一个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>
More complex example: How to make an svg interactive to gather comments/annotations on depicted elements更复杂的示例： 如何使 svg 交互以收集对描绘元素的评论/注释
解决方案4
-2 2021-05-27 09:05:52
You could use an html "include" script for the svg file like the one at https://www.w3schools.com/howto/howto_html_include.asp (tested, works)您可以对 svg 文件使用 html“包含”脚本，例如https://www.w3schools.com/howto/howto_html_include中的文件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.