鉴于:
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="url"></a>
</svg>
</body>
是否可以使用HTML DOM .querySelector()或.querySelectorAll()通过其xlink:href属性的内容选择SVG内的链接？
这有效:
document.querySelector('a') // <a xlink:href="url"/>
这些不是:
document.querySelector('[href="url"]') // null
document.querySelector('[xlink:href="url"]') // Error: not a valid selector
document.querySelector('[xlink\:href="url"]') // Error: not a valid selector
document.querySelector('[xlink\\:href="url"]') // null
有没有办法编写该属性选择器,使其"看到" xlink:href？
我有一个 svg 内容，看起来有点像这样：
<svg height="1000" preserveaspectratio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);" viewbox="0 0 1000 1000" width="1000"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clippath id="__lottie_element_2">
<rect height="1000" width="1000" x="0" y="0"></rect>
</clippath>
<clippath id="__lottie_element_4">
<path d="M0,0 L3048,0 L3048,2431 L0,2431z"></path>
</clippath>
</defs>
<g clip-path="url(#__lottie_element_2)">
<g clip-path="url(#__lottie_element_4)" opacity="1" style="display: block;" transform="matrix(0.5006899833679199,0,0,0.5006899833679199,-263.051513671875,-180.58868408203125)">
<g class="H01 2k" opacity="1" style="display: block;" transform="matrix(0.9999813437461853,0.006108480971306562,-0.006108480971306562,0.9999813437461853,504.42333984375,488.25836181640625)">
<image height="1442px" preserveaspectratio="xMidYMid slice" width="2048px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAA...MC2S3oHLwAAAABJRU5ErkJggg=="></image>
</g>
<g opacity="1" style="display: block;" transform="matrix(0.9947565197944641,-0.10227109491825104,0.10227109491825104,0.9947565197944641,452.203369140625,619.6126708984375)">
<image height="1442px" preserveaspectratio="xMidYMid slice" width="2048px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAAA...BJRU5ErkJggg=="></image>
</g>
<g opacity="1" style="display: block;" transform="matrix(0.9999813437461853,0.006108480971306562,-0.006108480971306562,0.9999813437461853,504.40704345703125,490.92486572265625)">
<image height="1442px" …我正在尝试将带有'.svg'扩展名的svg图像添加到我的图表(使用d3创建的另一个svg图像).
这是代码:
d3.select("#chart1 svg")
.append("svg:image")
.attr("xlink:href", "img/icons/sun.svg")
.attr("width", 40)
.attr("height", 40)
.attr("x", 228)
.attr("y",53);
正如您所看到的,我正在设置"xlink:href"属性,但是d3会在浏览器中将其更改为href:
<image href="img/icons/sun.svg" width="40" height="40" x="228" y="53"></image>
事实上,如果我使用png扩展名,这段代码就能完美运行.任何的想法？
我有一个结构:
<div id="div">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
<image x="2cm" y="2cm" width="5cm" height="5cm" id="img" xlink:href="pic.jpg"></image>
</svg>
</div>
我想得到pic.jpg网址,我需要从最外层的div开始,而不是完全来自source <image>元素:
var div = document.getElementById("div");
var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];
var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0];
var url = img.getAttribute('xlink:href'); // Please pay attention I do not use getAttributeNS(), just usual getAttribute()
alert(url); // pic.jpg, works fine
我的问题是从SVG及其子元素等元素中获取此类属性的正确方法是什么？
因为在我尝试这种方式之前它在Chrome中运行良好(我没有尝试其他浏览器):
var svg = div.getElementsByTagName('svg')[0]; // I do not use NS
var img = svg.getElementsByTagName('image')[0];
var url = img.getAttribute('xlink:href'); // and do not …我正在构建一个包含各种图像标记的SVG文档.图像的xlink:href(源URL)属性包含带有&符号的查询字符串.如果我将它们作为%26或ascii编码? 它们不是有效的查询字符串,服务器也不会传递图像.我无法用CDATA逃避它们,因为它们是属性(不是节点).我已经尝试在图像标记中创建一个xlink:href节点,但是SVG解析器会忽略它.我想使用纯SVG(而不是HTML中的SVG),以便我可以在以后转换为JPG,因此编写脚本...
关于我如何能够完成以下工作的任何提示？
<image x="0" y="0" width="306" height="306" xlink:href="http://host.com/image.jpg?token=asdf&expiration=9384029&etc=etc"/>
谢谢!
我正在使用<use xlink:href>来引用我的svg文件。
它在我的本地工作正常，但是当我从 CDN 引用它时会引发错误 (CORS)。看起来好像xlink:href不允许CORS请求，但我想知道是否有任何解决方案？
另一方面，我听说这种精灵技术在SVG2上已被弃用。那么现在使用 sprite SVG 文件的最佳解决方案是什么，它适用于所有不同的浏览器，包括移动浏览器。
我试过的是这个
<a xlink:target="http://ponyoverflow.com">
<text class="text" x="20" y="718" text-anchor="start">Mail Order Ponies</text>
</a>
和变型与href和type="simple".
将显示链接文本,但链接不可单击.我尝试了Firefox 3.5.5,Chromium,Inkscape和GNOME Image Viewer.
语法是否有问题,如果没有,是否有任何支持SVG链接的应用程序？
我在服务器上的同一位置有以下文件 image.svg 和文件 bitmap.png：
<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100px" height="100px" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="100px" height="100px"
xlink:href="bitmap.png" />
</svg>
当我直接转到图像文件时，它包含 bitmap.png 图像。
当我将图像包含在带有<object data="image.svg"></object>标签的网页中时，将加载 bitmap.png 文件。
当我将图像包含在带有<img src="image.svg" />标签的网页中时，bitmap.png 不会加载。
是什么赋予了？
我需要在 svg<image>元素上设置 'xlink:href' 属性，如下所述。
我可以用 CSS 做到这一点吗？
我有简单的代码，其中包含带有<use>标签的svg 图标到使用 stencjiljs（tsx 语法）创建的 web 组件中。但是，当我xlink:href向<use>标签添加属性时，我收到错误Identifier expected。
Example code:
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'example-component',
styleUrl: 'example-component.scss',
})
export class ExampleComponent {
render() {
return (
<svg>
<use href="#iconid" xlink:href="#iconid"/>
</svg>
);
}
}
我厌倦了寻找 tsx/jsx 特定的解决方案，但我得到的只是它xLinkHref在 React 中，在这种情况下不起作用。
我有具体的方法来做到这一点吗？
xlink ×10
svg ×9
image ×3
dom ×2
href ×2
javascript ×2
ampersand ×1
cdn ×1
css ×1
d3.js ×1
html ×1
html5 ×1
query-string ×1
svg-sprite ×1
tsx ×1
typescript ×1
urlencode ×1