将 SVG 文件插入 HTML答案

【问题标题】：Insert SVG file into HTML将 SVG 文件插入 HTML
【发布时间】：2021-05-27 08:57:56
【问题描述】：

我有 3 个文件：test.html、test.js 和 test.svg

我正在尝试将不同的文件调用为 HTML，但文件 svg 不起作用

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

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 width="500" height="100">
    <circle id="circle1" cx="20" cy="20" r="10"
            style="stroke: none; fill: #ff0000;"/>
</svg>

我不明白为什么我不能插入带有对象的 svg 文件

感谢您的帮助

【问题讨论】：

为什么需要使用对象标签？直接使用svg即可。本来这个是用来跑flash什么的，现在已经不需要了。
请看这篇文章以获得更多见解Link
那么，直接在htm里面使用比较好？ Bcs 想象一下如果我有很多 svg 吗？
请检查文件路径以及控制台说了什么？尝试在 svg 标签中指定viewBox 属性
尝试使用图片标签。。并检查控制台是否有错误。

标签： javascript html svg

【解决方案1】：

您可以直接在 HTML 中使用 svgs。最简单的方法是在 HTML 中使用 SVG。您还可以在页面上重复使用 svg 形状，但图标具有 shadow-dom 边界。

如果您使用对象或 svg 标记，它会很好地呈现，但您会丢失 SVG 中有关类、ID 等的所有信息。

更多信息SVG on css-tricks

有关如何在 css-tricks 上使用 SVG 的 group and re-use shapes 的更多信息（and one more，也在 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();">

【讨论】：

【解决方案2】：

<object> 标签可用于许多元素，包括 SVG 文件，因此不被识别为图像元素，所以：

在图片搜索中不可用。所以你可以使用<img>标签作为后备（可选但推荐）
您应该指定对象的类型

所以你可以这样改变它：

    <object type="image/svg+xml" data="test.svg" width="300" height="300">
        <img src="test.svg" />
    </object>

另一个问题是 SVG 文件。基于MDN documents：

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>

我做了一个简单的小例子，结帐this sandBox link

【讨论】：

我更新了答案并添加了一个有效的沙盒链接，你能检查一下吗？ @zefzefaa

【解决方案3】：

见 Dev.To 发帖：<load-file> Web Component

使用现代的原生 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>

更复杂的例子：How to make an svg interactive to gather comments/annotations on depicted elements

【讨论】：

【解决方案4】：

您可以为 svg 文件使用 html“包含”脚本，例如 https://www.w3schools.com/howto/howto_html_include.asp 中的脚本（经过测试，有效）

【讨论】：

出于兴趣，为什么是-1？使用 ajax 包含（相同域）文件是否存在问题？并非每个人都可以访问服务器端包含。
您没有描述 html“包含”脚本是什么，也没有在答案中提供示例。如果链接断开，则此答案没有太大价值。也不要仅仅从 w3schools 复制代码，因为那将是抄袭，因为这是一个很好的答案，您需要编写自己的示例。看看其他回答者提供了多少细节。