SVG Xlink不会在<use>标记中使用xlink:href链接到外部文件
SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。它使用XML格式来定义图形，可以实现图形的缩放、旋转、平移等操作而不会失真。SVG广泛应用于Web开发中，可以用于创建图标、图表、动画等。
Xlink（XML Linking Language）是一种用于在XML文档中创建超链接的语言。它允许在XML文档中引用其他文档或文档片段，并创建超链接关系。在SVG中，可以使用Xlink来创建链接，以便在SVG图形中引用其他SVG文件或片段。
<use>标记是SVG中的一个元素，用于复用已有的SVG元素。通过<use>标记，可以将一个已有的SVG元素插入到当前的SVG文档中，并进行复制、平移、旋转等操作。在<use>标记中，可以使用xlink:href属性来指定要引用的外部SVG文件或片段。
然而，根据题目要求，不提及具体的云计算品牌商，无法给出腾讯云相关产品和产品介绍链接地址。但是，腾讯云也提供了SVG相关的服务，可以在腾讯云官方网站上查找相关产品和文档。
相关·内容
我有一个按钮的元素。SVG片段内部链接到主体顶部的包含SVG文件。
<a href="#menu" class="head__toggle" title="Toggle Menu">
<svg viewBox="0 0 70.115 53.162" class="head__btn">
<use xlink:href="#skmenu"></use>
</svg>
</a>
当我向Codesniffer查询
浏览 0提问于2014-08-24得票数 1
我在svg和ios上遇到了一个奇怪的问题。我用的是angularjs和cordova。
我在一个angular应用程序中包含了一个外部svg，并将其显示在我的视图中：
<svg viewBox="0 0 640 550">
<use xlink:href="#mysvg"></use>
</svg>
在我的外部svg中，我获得了几个带有链接的g元素：
<a xlink:href="/path/to/page"></a>
当我用cordova导出webview时，这在a
浏览 1提问于2014-05-06得票数 1
我有一个有趣的问题(希望如此！)我注意到有两种“类型”的SVG
首先，我们有传统的SVG文件和标签，例如：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 841.89 1190.55" style="enable-background:new 0 0 841.89 1190
浏览 3提问于2021-05-15得票数 2
2回答
更改svg元素中的图像
、、、
我正在尝试修改HTML文档中现有的SVG元素。我有以下几点：
<svg class="logo" viewBox="0 0 435 67"> <!-- IMAGE DIMENSIONS -->
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo--someLogo"></use>
</svg>
我猜它必须在该xlink:href="#logo--someLogo"
浏览 1提问于2017-01-17得票数 1
我在我的主svg文件中使用了<use xlink:href="path/to/file.svg">元素，以便多次克隆svg的可重复块。
index.svg：
<g id="menu_items" transform="translate(0,110)">
<use xlink:href="path/to/file.svg">
<use xlink:href="path/to/file.svg">
<!-- 10
浏览 1提问于2012-12-29得票数 1
回答已采纳
在我的WordPress主题中，我在我的身体后面有一个SVG精灵符号：
<svg style="display:none;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 104 64" id="icon1">...</symbol>
<symbol vie
浏览 9提问于2016-04-14得票数 1
回答已采纳
3回答
我一直在尝试将我的SVG图标外部化到一个文件中，并用<svg><use xlink:href="file.svg#icon" /></svg>这样的标记来引用它们。从理论上讲，这真的很好用，但不同的浏览器在渲染方面存在问题。当在文件中引用带有<use>的符号并直接打开svg文件的url时，所有的浏览器都能够正确地呈现svg。
简而言之，当在标记中引用带有<svg><use/></svg>的符号时，有没有一种跨浏览器的方法可以让SVG linearGradient作为元素的填充？
我设置了一个柱塞
浏览 6提问于2017-05-29得票数 22
我正在导入包含SVG代码的html并通过via指令呈现它，但我需要将单击事件绑定到该文件中的aren标记，该文件不是我的模板的一部分。
如何从导入的文件中获取所有的a标记？
以及如何使用v-on指令将事件绑定到这些元素上呢？
模板
<v-flex mt-2 px-0 xs6
ref="map_svg"
v-html="mapHTML">
</v-flex>
导入文件的片段
<svg>
浏览 0提问于2019-03-27得票数 0
回答已采纳
2回答
我有这样一个简单的SVG地图：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg>
/*The opening svg tag is longer, thanks to attributes, but for the sake of simplicity,
i cut it short like this....*/
<script xlink:href="/resources/helper_functions.js
浏览 4提问于2015-12-07得票数 1
我在React中使用svg元素，认为<use>在JSX中是有效的。以下错误是否正确？
在JSX中不再支持小写组件名称(使用)：参见解析文件时的。
<svg className="icon">
<use xlink:href="#icon-call"></use>
</svg>
使用dangerouslySetInnerHTML修复了它。
<svg className="icon" dangerouslySetInnerHTML={{__html:'<use x
浏览 2提问于2014-12-05得票数 3
回答已采纳
由于某些原因，我的spinner.svg在使用xlink:href时没有动画。如下面的片段所示，在页面上嵌入SVG并使用xlink:href似乎很好。
问题:静态(和固体！)旋转器而不是动画
为什么SVG的动画标签突然不起作用？引用必须工作，因为图像实际上正在显示。
编辑：可能与阴影dom和xref？有关“目标元素必须是当前SVG文档片段的一部分”。我可能重载了“文档片段”意味着什么，但对我来说，文档片段属于影子DOM域，我怀疑SMIL动画在使用<use>语句时可能会因为这个原因而无法工作吗？
工作版本
.xlinked {
color: green;
}
im
浏览 4提问于2017-02-15得票数 3
3回答
因此，为了包含大多数需要简单样式的SVG图标，我这样做：
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>
到目前为止，我一直在尝试将ReactJS作为我的新前端开发堆栈中的一个可能的组件，但是我注意到，在它支持的标记/属性列表中，use和xlink:href都不受支持。
是否可以在ReactJS中使用svg精灵并以这种方式加载它们？
浏览 187提问于2014-11-08得票数 131
回答已采纳
背景
我有一组SVG图标，它们都有阴影。要想在Chrome中实现这一点，我不能只使用filter:drop-shadow。我必须使用filter:url(#drop-shadow)，并在我的<defs>部分中定义拖放阴影。
我在页面上也有这些图标的多个实例(它们是文件列表中的文件类型图标)，所以我使用<use>来保持页面的干燥。
代码
扩展的SVG文件
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version=
浏览 3提问于2016-04-21得票数 6
我试图使用SVG图像作为css背景图像。所讨论的SVG最终将使用许多大型JPEG图像(嵌入或链接)作为其他SVG元素的掩码。我这样做，而不是使用PNG来节省文件大小。(我的高度压缩的灰阶jpegs很小)
目前，我只能获得嵌入式base64编码的图像以正确显示，而Safari只是无法工作(除了使用嵌入式直接显示SVG之外)
以下是我的测试代码：
(所有图像都来自archive.org，链接应该是持久的--我省略了base64编码的数据)
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-e
浏览 5提问于2014-12-07得票数 3
回答已采纳
我试图使一个图像链接网页可访问，但图像是SVG。它必须符合AMP工具(见此处：)。在这里可以找到正在抛出的具体问题：
这个代码片段将完美地传递AMP工具。
<svg role="img" class="icon icon-large">
<title>Build a Long-Term Plan</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-calendar"></us
浏览 5提问于2016-10-07得票数 5
回答已采纳
我在使用SVG时遇到了问题，请从示例中了解Element.Lets
Svg1.svg
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/s
浏览 6提问于2014-04-25得票数 0
4回答
SVG标准允许使用和引用外部SVG文件。
我有一个文件circle.svg，它定义了一个id为"the_circle“的圆对象。从主要的SVG文件，我能够包括这个圆和动画它，使用。
我也想通过javascript访问相同的circle对象，我该怎么做呢？xlink:href="url(#the_image)#the_circle"的javascript等价物是什么？
使用document.getElementById('the_image')，我只能访问SVGImageElement，但不能访问所包含的SVG中定义的对象。
<?xml versio
浏览 0提问于2010-07-28得票数 12
回答已采纳
1回答
超链接SVG <use>标签
、、、、
我无法使用<use>标记超链接图标。我创建了一个SVG图标系统，并将其保存在外部源()上。我尝试了几种选择，但都没有成功。
HTML代码：
<svg class="icon-LinkedIn">
<use xlink:href="symbol-defs.svg#icon-LinkedIn">
<a href='https://www.linkedin.com/'></a>
</use>
</svg>
尝试：
&
浏览 1提问于2016-04-05得票数 3
回答已采纳
2回答
我的代码如下：
nav.nav-buttons
each val in ["lock", 'monitor', "live", "folder", "video", "script", "presentation", "pack", "checked", "play-simple", "reload", "star", "lock", "tags"]
a(hre
浏览 4提问于2015-07-01得票数 0
回答已采纳
我试图通过使用一个svg元素将use放在页面中的外部引用中，如下所示：
<svg class="xyz" width="25px" height="25px" fill="red" xmlns:xlink="http://www.w3.org/1999/xlink">
<use id="useLogo" runat=server class="xyz" href="~/Content/images/test.svg#shape" xlink:
浏览 0提问于2018-04-16得票数 0
回答已采纳
我有这个SVG数据，我想要存储在一个外部文件并加载它，什么是最好的做法？因此，我可以使用它加载svgs，例如：
<svg class="icon icon-heart"><use xlink:href="#icon-heart"></use></svg></span>
浏览 0提问于2015-04-17得票数 3
我有一个svg符号文件，这里有一个片段。
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="oval" viewBox="0 0 60 60">
<title>oval</title>
<path ... />
</symbol>
<symbol id="rectangle" vie
浏览 0提问于2018-10-29得票数 0
我把一个表格样式的导航栏放在一起，在每个导航栏中我都放置了链接到网站其余部分的标签。
代码如下：
<li class="">
<a href="#section-shape-3">
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></
浏览 16提问于2017-01-23得票数 0
如何通过脚本来改变在defs中定义的"use“的样式？我试图在w3c工作草稿界面中移动，但在那个迷宫中失败了。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg&#
浏览 3提问于2011-02-21得票数 25
1回答
我是新的angularJS和创建应用程序使用angular2。在运行应用程序时，我得到了以下错误：
这是我的档案：
<ul class="social-links">
<li>
<a [href]="facebook" target="_blank">
<svg width="12" height="26">
<use xlink:href="../../../assets/images/sprite.svg#fa
浏览 2提问于2018-04-29得票数 3
1回答
编辑: Firefox似乎是唯一支持此功能的浏览器。我在找Chrome的解决方案。
我正在尝试在一个网站的多个页面上重复svg标题，我可以通过<use>实现这一点，但问题是svg中的超链接(即徽标)不会响应单击事件。
下面是一个简单的片段，它显示了这个问题。带有内联超链接的左框工作正常，但是当它通过<use>标记包含时，它不会响应单击，就像右框所看到的那样。
<svg width="300" height="100">
<svg id="link">
<a href=&
浏览 3提问于2017-02-01得票数 1
无法找到使用css :before在<use>标记中添加<use>的示例。到目前为止，我已经尝试过：
.icon-test:before {
content : '<use xlink:href="test.svg#icon-test"></use>';
}
.icon-test:before {
content : '\003Cuse xlink\003Ahref\003D\0022test\002Esvg\0023icon-test\0022\003E\003C\002Fuse\003E
浏览 3提问于2015-02-13得票数 2
回答已采纳
针对项目效果设计了一些特殊的结构，并在标签上设置了aria-label属性。但是Nu HTML告诉我“可能误用 "**
<h3 aria-label="Contact">
<span aria-hidden="true" class="char-wrapper">c
<svg class="char-svg char--c">
<use xlink:href="#char--c"></use>
浏览 5提问于2022-07-12得票数 1
回答已采纳
我在wwwroot中有svg-icons和Bootstrap文件夹。
我使用SVG图标的html代码是：
<svg class="olymp-happy-face-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
当我运行我的ASP.NET MVC项目时，我得到了控制台：
XML解析错误:找不到根元素
位置：
如何将svg-icons文件夹导入或href到ASP.NET MVC，如
&l
浏览 30提问于2019-06-24得票数 1
我从官方下载页面()为OS使用Inkscape 0.92，但我似乎无法让它加载使用http包括的图像，例如，像这样的SVG
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="950" height="717">
<image width="120" height="120" preserveAspectRa
浏览 2提问于2017-09-28得票数 1
我试图引用外部文件中的符号，但无法在Chrome或Firefox中工作。
如果在html文件的顶部定义了一个符号，我可以在另一个符号中引用它们，这样没有问题：
<!-- in the html file -->
<svg width="0" height="0">
<symbol id="local-circle" viewBox="0 0 100 100" overflow="visible">
<circle
cx="50"
浏览 1提问于2015-02-22得票数 1
回答已采纳
我想在一个包含"use“标记的html5页面中包含一个内联svg，该标记引用了另一个svg文件中的元素。这是SVG规范的一部分，可以在Chrome33和FireFox 27上运行(正如我曾经尝试过的那样)。它在IE 11中似乎不起作用。
我的问题是:有没有办法做到这一点(同时仍然维护外部svg，而不是使用javascript)，可以在所有三种浏览器中工作？
在实际用例中，定义是静态的、大型的，并且在多个页面之间以及每个页面上的多个内联svg之间共享。我希望这些定义下载一次，然后缓存，然后在任何地方使用。
我知道用javascript可以做到这一点，但由于这种用法范例是SVG规范的一部分
浏览 1提问于2014-03-20得票数 14
我试着做一个SVG图标精灵，就像在这把小提琴里一样
唯一的区别是在我的应用程序中，我使用了一个相对URL“./images/svg-sprite.svg#home-图标”，这在chrome和safari上非常有用，但在firefox上却没有显示出来。
<svg class="home-icon">
<use xlink:href=../images/svg-sprite.svg#home-icon"/>
</svg>
当我将svg sprite内联添加到页面顶部，然后使用它时，Firefox工作得很好。
<svg cl
浏览 4提问于2015-08-20得票数 8
回答已采纳
我无法在Nuxtjs(Vue)中将svg xlink:href作为动态属性。我试着像下面这样使用它
<svg class="icon phone-icon">
<use
v-bind="{ 'xlink:href': '../assets/sprite.svg#icon-download' }"
></use>
</svg>
我该如何让它工作呢？
浏览 42提问于2019-10-30得票数 1
回答已采纳
1回答
假设我有一个SVG文件。它引用一个外部CSS样式表以及一个外部SVG文件。这是一个简短的版本。
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="svg.css"?>
<svg version="1.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" xmlns="http
浏览 6提问于2021-12-22得票数 0
1回答
在Chrome (不是FF、Safari)中，我无法通过class/ID/element引用来样式化外部链接(xlink:href) SVG模板的子元素。
我想知道我是不是做错了什么？还有人遇到过这个问题吗？
HTML：
<svg class="my-svg"><use xlink:href="demo.svg#my-icon" /></svg>
demo.svg：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3
浏览 3提问于2015-01-21得票数 0
我无法获得可重用项或组中的所有子项目来符合指定的transform-origin。目标是能够反复使用相同的样式模板重复使用相同的形状。然而，考虑到transform-origin的样式，CSS或其他，并不是层叠的。它只适用于<use>时。
例如：
svg {
width: 125px; height: 125px;
background: rgba(0, 0, 0, 0.5);
}
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000
浏览 0提问于2018-05-19得票数 4
回答已采纳
1回答
我正在为一个用户界面开发一些SVG按钮。我必须在java文件中动态创建一个链接，其中包含来自标记的一些代码。下面的代码是我的markup-input的示例。
html-标记输入：
<svg>
<g>
<wicket:link wicket:id="test">
<path ..../>
<path ..../>
</wicket:link>
</g>
</svg>
我希望markup-ou
浏览 2提问于2014-11-03得票数 0
4回答
您好，我正在处理一个svg/js地图，其中包含许多小svg图形(城市地区)。我将每个图形放到一个自己的文件中，这样我的主svg文件仍然是可维护的，不会臃肿。
如何从另一个svg正确引用外部svg文件？
预期结果:在浏览器中打开1.svg并看到一个蓝色矩形。它的工作原理：
所以我试了一下: 1.svg：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css
浏览 505提问于2011-08-27得票数 24
回答已采纳
我正在使用svg来绘制一张图片，然后让它成为一个带有锚标签的超链接，当点击这个标签时，它将跳转到一个新的url。当我将svg路径放入行内时，这在IE上有效，但是当我用"use“标记替换它时，目标超链接就不再起作用了。在两种情况下，当鼠标悬停在svg绘制的图片上时，目标超链接都会显示在浏览器的底部，但单击"use“将不起作用。我试过用一个g标签把锚标签包起来，但是没有用。
感谢您的反馈，谢谢。注意:我的实际需求并不是如此微不足道，但我已经将问题简化到这一点，以帮助查明问题。我真的很想把svg放到一个.svg文件中，这样我就可以在不需要在多个.html文件中复制它的情况下重用它。
浏览 0提问于2017-09-17得票数 0
4回答
下面是一个简单的例子。它存储在image.svg中。
<svg>
<defs>
<g id="shape">
<circle cx="100" cy="100" r="100" />
</g>
</defs>
</svg>
但是，将这些代码放入HTML文件并不会加载任何内容。为什么会这样呢？
<svg>
<use xlink:href="#shape" x="
浏览 8提问于2017-01-23得票数 5
回答已采纳
1回答
我创建了一个带有所有svg文件的node_module来模块化我们的体系结构。
当我使用以下方法调用它时，它可以正常工作：
<q-icon>
<svg>
<use xlink:href="~svgmodule/svgs/icons.svg#addicon"></use>
</svg>
</q-icon>
然而，当这样做时：
<q-icon>
<svg>
<use :xlink:href="'~svgmodule/svgs/icons.
浏览 1提问于2020-05-29得票数 3
回答已采纳
我们使用多个来显示图标。
<!-- defining them at the start of the page -->
<div id="icon-container">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol xmlns="http://www.w3.org/2000/svg"
id="rect" ...>
<rect... />
</symbol&
浏览 2提问于2015-03-19得票数 13
回答已采纳
我正在尝试有一个从.txt文件中拉出一些文本和显示它的SVG。到目前为止，这是我的代码。
<svg width="10cm" height="3cm" viewBox="0 0 1000 300" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="100" y="200" font-
浏览 0提问于2013-01-06得票数 1
回答已采纳
我试图在IE中对encodeURIComponent()中的任何东西进行动画化。我知道IE不支持SMIL，但它比使用纯JS来动画/旋转svg标记简单得多。下面是一个在Firefox和Chrome中工作的例子，但不适用于IE：
var uri = encodeURIComponent(
'<?xml version="1.0" encoding="utf-8"?>' +
'<svg xmlns:svg="http://www.w3.org/2000/s
浏览 4提问于2014-09-22得票数 0
回答已采纳
在来自的文件中，动画在Chrome、Iron、Opera、Vivaldi浏览器中旋转行，没有任何问题。它在Firefox中不起作用。60.0.2或Internet 11.据了解，SMIL不适用于IE或Edge，但我希望找到为什么它不在Firefox中运行。我已经减少了下面的代码行，但是它们仍然在支持动画的浏览器中运行动画。是否有可以实现的CSS替代方案？
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" &
浏览 2提问于2018-06-19得票数 4
回答已采纳
在Spring应用程序中，我尝试使用命名空间设置属性。以下是我尝试过的：
<svg id="svg1" width="100%" viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"
xmlns:th="http://www.thymeleaf.org"
xmlns:xlink="http://www.w3.org/1999/xlink">
...
<image th:attr="x=
浏览 2提问于2016-02-27得票数 3
回答已采纳
我有以下几点：
<svg viewBox="0 0 20 20" class="icon">
<use xlink:href="/img/svg/road.svg#Laag_1"></use>
</svg>
我的文档类型是正确的。当我将它添加到一般的<img>标记中时，就会显示它。我不能这样做的原因是我不能做任何动画(例如:填充：#fff;)，所以这是唯一的解决方案。
这些图标在所有其他浏览器中都会正确显示。这里有什么想法吗？
浏览 1提问于2016-03-08得票数 1
回答已采纳
1回答
我正在尝试使用SVG精灵作为站点中的图标，如下所示：
<svg aria-hidden="true" class="icon">
<use xlink:href="{% static 'images/site-icons.svg#icon-twitter' %}"></use>
</svg>
但是，这是不起作用的，因为这个#被Django转义了，所以我最终得到了：
<svg aria-hidden="true" class="icon"&
浏览 4提问于2016-11-21得票数 7
回答已采纳
我的文档中有一个SVG，我用JavaScript添加了一个符号，如下所示：
var myScene =document.getElementById('myScene');
var useSVG = document.createElement('use');
useSVG.setAttribute('xlink:href','spriteSheet.svg#mySymbol');
useSVG.setAttribute('x','10');
useSVG.setAttribute('y&#
浏览 4提问于2014-09-20得票数 9
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
