正文

如何在 HTML 中使用外部 SVG？

 2023-03-06  99

关键词：

【中文标题】如何在 HTML 中使用外部 SVG？【英文标题】：How to use external SVG in HTML? 【发布时间】：2015-04-23 12:41:53 【问题描述】：

我尝试制作一个引用 SVG 文件的 HTML，该 SVG 文件是交互式的（CSS 悬停）：

<img src="algerie.svg">

如果我使用开发工具在新选项卡中打开此图片，它会变成交互式的。

如果我使用：

<svg viewBox="0 0 512 512">
  <use xlink:href="algerie.svg"></use>
</svg>

然后什么都没有显示，更糟糕的是，Chrome 或 Firefox 没有在网络开发工具中检测到该文件。

【问题讨论】：

这能回答你的问题吗？ Do I use <img>, <object>, or <embed> for SVG files? 【参考方案1】：

你应该使用<object>标签嵌入图片：

<object data="algerie.svg" type="image/svg+xml"></object>

详情请参考这个问题：Do I use <img>, <object>, or <embed> for SVG files?

【讨论】：

不用type="image/svg+xml"，最好配合width和height属性使用！假设SVG有<path>或<polygon>或<line>等元素。是否可以通过<object> 方法为这些元素设置fill 或stroke 属性？ @HemantArora 是的，你可以！您可以选择元素以更改其属性，就像普通的 html 元素一样。此外，您还可以将类绑定到要更改的元素。你可以查看这篇文章了解更多详情https://benfrain.com/selecting-svg-inside-tags-with-javascript/ 当使用 CSS 加载到 OBJECT 标记中时，您实际上无法操作任何 SVG 元素，因为对象将 SVG 加载到它自己的文档中，因此 CSS 无法访问它。但是，您可以使用 JS 操作它们，这不是一个非常干净的解决方案，而且您必须执行其他操作，例如等待图像加载然后使用 JS 操作它。我认为这不是一个好的解决方案。

在 HTML 中嵌入外部 SVG 以进行 JavaScript 操作

】在HTML中嵌入外部SVG以进行JavaScript操作【英文标题】：EmbeddingexternalSVGinHTMLforJavaScriptmanipulation【发布时间】：2012-12-1315:09:26【问题描述】：我有一个SVG图像，显示地理区域。http://upload.wikimedia.org/wikipedia/commons/7/71/Nederland_gemeenten... 查看详情

外部文件中的 SVG 精灵

...】：2014-05-2411:26:29【问题描述】：我正在为我的应用程序使用由IcoMoonApp创建的带有SVGSprite的图标系统。在index.html我现在有这样的东西：<html><head>...</head><body><svgdisplay="none"version=" 查看详情

在没有外部文件的 svg 中使用 FontAwesome 图标

】在没有外部文件的svg中使用FontAwesome图标【英文标题】：useFontAwesomeiconinsvgwithoutexternalfiles【发布时间】：2013-08-1601:32:53【问题描述】：我需要创建一个SVG（使用PHP和/或Javascript），其中一些SVG元素是来自FontAwesome的图标，但是... 查看详情

如何在svg中使用对话框

参考技术A如何在SVG中使用对话框与用户交互是SVG开发中常见的一个问题，SVG的窗口对象只提供了alert,confirm,prompt窗口方法，如何在SVG中创建和使用其它复杂对话框呢？解决的方法有几种：1，使用传统的HTML，其中嵌入SVG对象，使... 查看详情

如何在html5中使用svg

　　　　SVG即ScalableVectorGraphics，是一种用来绘制矢量图的HTML5标签。你只需定义好XML属性，就能获得一致的图像元素。　　使用SVG之前先将标签加入到HTMLbody中。就像其他的HTML标签一样，可以为SVG标签为之添加ID属性。也可以为... 查看详情

如何使用 create-react-app 从外部模块导入 svg react 组件？

】如何使用create-react-app从外部模块导入svgreact组件？【英文标题】：Howtomakesvgreactcomponentimportsfromexternalmoduleworkingwithcreate-react-app?【发布时间】：2021-07-2300:51:27【问题描述】：上下文为了使一些代码部分在许多react项目中可重用，... 查看详情

如何在html对象元素中更改svg位置的背景颜色[重复]

】如何在html对象元素中更改svg位置的背景颜色[重复]【英文标题】：Howtochangemybackgroundcolorofsvgplaceinhtmlobjectelement[duplicate]【发布时间】：2018-04-2420:15:23【问题描述】：如何更改html对象元素中svg位置的背景颜色。使用CSS、Jquery或Jav... 查看详情

替换 SVG 文档中的变量（在 YAML 中外部定义）

...2-0820:50:10【问题描述】：背景一些资源讨论了在SVG文档中使用变量，包括：VariablesinSVG:Isitpossible?SVGvariabletextHowdoIdefineorreferenceavariablein 查看详情

如何在 Angular 组件 HTML DOM 中注入 SVG 图标精灵？

】如何在Angular组件HTMLDOM中注入SVG图标精灵？【英文标题】：HowtoinjectSVGiconspritesinAngularcomponentHTMLDOM?【发布时间】：2018-10-3117:26:32【问题描述】：我正在构建一个Angular应用程序(Angular4/5/6)，并希望在我的组件模板中使用SVG精灵。... 查看详情

使用对 Canvas 的外部引用来渲染 SVG

】使用对Canvas的外部引用来渲染SVG【英文标题】：RenderSVGwithexternalreferencestoCanvas【发布时间】：2015-08-0415:16:03【问题描述】：我正在尝试使用data:URI和canvas.drawImage()将SVG渲染到画布上。这很好用，只是SVG中的外部图像不包含在生... 查看详情

您如何使用 CSS 设置外部 svg 的样式

】您如何使用CSS设置外部svg的样式【英文标题】：Howdoyoustyleaexternalsvgwithcss【发布时间】：2022-01-1303:07:14【问题描述】：是否可以像使用文本一样使用css设置外部.svg的样式？我错过了什么？我的标记和css如下所示：<styletype="tex... 查看详情

需要在操作系统中更改暗/亮模式以强制刷新外部 SVG 文件

...les【发布时间】：2022-01-1021:34:19【问题描述】：我的网站使用了许多外部SVG文件，它们在SVG文件本身中带有自己的<style>元素。我在主网站CSS和中有暗模式媒体查询在SVG文件自己的样式中：@medi 查看详情

如何在 Angular html 中动态更新 SVG Image href？

】如何在Angularhtml中动态更新SVGImagehref？【英文标题】：HowtoupdateSVGImagehrefdynamicallyinangularhtml?【发布时间】：2020-03-0302:39:42【问题描述】：我正在遍历员工对象列表，其中每个对象都有imageUrl，我需要在svg-Image中使用该图像url<d... 查看详情

如何在 Angular JS 中更改 SVG 的颜色

】如何在AngularJS中更改SVG的颜色【英文标题】：HowtochangecolorofanSVGinAngularJS【发布时间】：2019-04-2319:13:39【问题描述】：我在我的代码中使用了src，当我想激活时，我想更改我使用的svg的颜色。HTML：<imgsrc="../icons/Burgers.svg"class="... 查看详情

如何在 Vue 的 css 部分中加载外部 svg

】如何在Vue的css部分中加载外部svg【英文标题】：HowloadexternalsvgincsssectioninVue【发布时间】：2020-03-2906:33:19【问题描述】：我需要在我的Vue组件的css部分加载外部svg图像。我有vue.config.js文件，如下所示：constpath=require(\'path\');modul... 查看详情

SVG 对象从外部 CSS 更改颜色

...题描述】：我在玩SVG（试图用SVG替换图标字体。）我让它使用对象标签来渲染图像/svg。但是，我不能让它从CSS中改变颜色。假设，我更喜欢从CSS中着色，有没有办法在我使用嵌入SVG时做到这一点。<objectclass="partnerLogo"type="i 查看详情

如何检查嵌入的 SVG 文档是不是加载到 html 页面中？

】如何检查嵌入的SVG文档是不是加载到html页面中？【英文标题】：HowtocheckifanembeddedSVGdocumentisloadedinanhtmlpage?如何检查嵌入的SVG文档是否加载到html页面中？【发布时间】：2010-09-2503:16:42【问题描述】：我需要编辑（使用javascript）... 查看详情

如何在 HTML/CSS 中裁剪 SVG 文件

】如何在HTML/CSS中裁剪SVG文件【英文标题】：HowtocropSVGfilewithinHTML/CSS【发布时间】：2016-10-0123:41:13【问题描述】：我有以下HTML文件(mypage.html)。SVG文件已作为图像附加到其中。<!doctypehtml><html><body>&... 查看详情