我是从JavaScript动态创建SVG元素.它适用于像矩形这样的可视对象,但是我在生成正常运行的xlink时遇到了麻烦.在下面的示例中,第一个矩形(静态定义)在单击时正常工作,但另外两个(在JavaScript中创建)忽略了点击...即使检查Chrome中的元素似乎显示相同的结构.
我已经看到了多个类似的问题,但没有一个能够解决这个问题.我发现最接近的是[ 通过JS在svg中添加图像命名空间仍然没有向我显示图片 ]但是这不起作用(如下所述).我的目标是纯粹使用JavaScript,而不依赖于JQuery或其他库.
<!-- Static - this rectangle draws and responds to click -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgTag">
<a xlink:href="page2.html" id="buttonTemplate">
<rect x="20" y="20" width="200" height="50" fill="red" class="linkRect"/>
</a>
</svg>
<script>
var svgElement = document.getElementById ("svgTag");
// Dynamic attempt #1 - draws but doesn't respond to clicks
var link = document.createElementNS("http://www.w3.org/2000/svg", "a"); // using http://www.w3.org/1999/xlink for NS prevents drawing
link.setAttribute ("xlink:href", "page2.html"); // no improvement with setAttributeNS
svgElement.appendChild(link);
var box = document.createElementNS("http://www.w3.org/2000/svg", "rect");
box.setAttribute("x", 30);
box.setAttribute("y", 30);
box.setAttribute("width", 200); …我在使用JavaScript时遇到问题,以便在SVG中的路径对象周围包装锚标记.所以,这里是我的SVG(缩短版本,只有两个路径)和id:
"striatum1"和"striatum2"
在id为"striatum1"的路径的情况下,我已经对链接进行了硬编码,如果路径为id"striatum2",我想以编程方式生成链接.
首先,请看一下SVG(brain.svg):
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="950"
height="481"
id="svg3194"
version="1.1"
inkscape:version="0.48.4 r"
sodipodi:docname="100883818.svg">
<metadata id="metadata3363">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs id="defs3361" />
<sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1137" id="namedview3359" showgrid="false" inkscape:zoom="1.8831579" inkscape:cx="398.09195" inkscape:cy="263.64271" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg3194" />
<g sub_image_id="100883818" graphic_group_label="Atlas - Adult Mouse" graphic_group_label_id="28" parent_id="" order="1" id="1140353" transform="scale(0.0625,0.0625)">
<a …我有简单的代码，其中包含带有<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 中，在这种情况下不起作用。
我有具体的方法来做到这一点吗？
我正在尝试获取一个SVG对象(欧洲地图),其中7个国家/地区被选为指向特定页面的链接.
在我的SVG文件中,我已经使用这种通用语法包装了应该是链接的每个多边形或路径:
<a xlink:href="http://www.google.com">
<polygon class="lebanon" id="lebanon2" points="249.1,157.2 249.8,157.4 251.7,157.3 252.3,156.1 253.1,156.1 253.9,154.7 254.4,153.1 255.5,152.5 256.1,152.5 256.7,152.2 256.3,151.3 256.4,149.7 255.4,149.2 254.8,147.9 252.4,147.8 252.4,148.1 251.6,148.3 251.3,152.5 250.3,154 249.3,155.4 249.3,157"/>
</a>
但是,在页面加载时,U会收到以下错误:
This page contains the following errors:
error on line 32 at column 15: Namespace prefix xlink for href on a is not defined
Below is a rendering of the page up to the first error.
我如何让它工作？
有谁知道如何通过xlink:hrefCSS属性选择XML元素？
请参阅此处了解用法,但不解释如何使用CSS选择它.
<book title="XQuery Kick Start">
<description
xlink:type="simple"
xlink:href="http://book.com/images/XQuery.gif"
xlink:show="new"> ... </description>
</book>
我可以xlink:href通过javascript和jquery修改就好了,但xlink:href通过敲除attr绑定修改dom是不行的.
这是我的svg定义
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
<defs>
<symbol id="icon-home" viewBox="0 0 32 32">
<path class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
</symbol>
</defs>
它插在身体的顶部
然后icon在我的视图模型上使用带有html和属性的knockout
<svg class="svg-icon">
<use id="myuse" data-bind="attr: {'xlink:href': icon }"></use>
</svg>
我确定图标正确返回,因为我得到以下渲染输出
<svg class="svg-icon">
<use data-bind="attr: {'xlink:href': icon }" xlink:href="#icon-home"></use>
</svg>
这是正确的,但没有任何显示.是否有人有淘汰赛的解决方案？
我是 SVG 的初学者。我正在尝试使用 css更改<use>悬停在特定元素上的多个元素的样式<use>，但我不能，因为<use>元素使用Shadow DOM.
我有以下几点<defs>：
<defs>
<filter id="Sjax0b81q1" filterUnits="userSpaceOnUse">...</filter>
<circle cx="0" cy="0" r="40" id="action-circle" style="cursor: move; fill: #fff;" filter="url('#Sjax0b81q1')" class="el action-el"></circle>
<g id="condition-rhombus" style="cursor: move; fill: #fff;" class="el condition-el" transform="matrix(1,0,0,1,0,0)">
<circle cx="0" cy="0" r="40" fill="none"></circle>
<path d="M -35 0, L 0 -35, L 35 0, L 0 35 L -35 0" style="stroke-linecap: round; stroke: white;" filter="url('#Sjax0b81q1')" class="condition-rhombus"></path>
</g>
<g id="svg-plus-button">
<circle cx="0" cy="40" r="10" id="svg-plus-circle" fill="none" style="fill-opacity: 1;" class="svg-plus-circle"></circle> …简单XLink到同一文档中另一个节点的一般要点似乎是:
<root xmlns:xlink="http://www.w3.org/1999/xlink">
<firstChild id="ID1" />
...
<ref xlink:href="#ID1" />
</root>
不使用XPointer或XPath,这与XLink一样多吗？你能不能做一个XLink,比如说是一个customId看起来像的东西:
<root xmlns:xlink="http://www.w3.org/1999/xlink">
<firstChild id="ID1" customId="{1234-5678}" />
...
<ref xlink:href="#customId/{1234-5678}" />
</root>
请不要仅仅参考我的W3规范 - 我不了解你,但需要一个特殊的人来解释它们,我今天不是那个人!
无论如何,据我所知,大多数XLink似乎都是关于引用外部资源,而且我见过的大多数例子都使用http链接到网络资源......我只是好奇你可以用XLink做什么来引用XML文档中的特定部分.
谢谢!
我正在尝试以编程方式向 XDocument 添加一个新的 XLink 节点，但 .Net 似乎将它们创建为原子化的命名空间和名称，我找不到任何代码将 XLink 节点添加到 XML？
我的代码如下所示：
//read in the current XML content
XDocument content = XDocument.Parse(xmlContent);
//add a new node called large images
XElement newNode = new XElement("large_images", "");
newNode.SetAttributeValue("{xmlns}xlink", "http://www.w3.org/1999/xlink");
newNode.SetAttributeValue("{xlink}type", "simple");
newNode.SetAttributeValue("{xlink}href", "tcm:5-550");
newNode.SetAttributeValue("{xlink}title", "of1_454x340.jpg");
content.Add(newNode);
不幸的是，这个 newNode 是这样出现的：
<large_images p1:xlink="http://www.w3.org/1999/xlink" p2:type="simple" p2:href="tcm:5-550" p2:title="of1_454x340.jpg" xmlns:p2="xlink" xmlns:p1="xmlns"></large_images>
但我需要节点看起来像这样才能通过 XML 验证：
<large_images xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="tcm:5-550" xlink:title="of1_454x340.jpg"></large_images>
有人可以帮忙吗？我不想走 String.Replace() 路线，因为这似乎必须是另一种方式？
谢谢
瑞安
对于我的使用,我可以方便地获得以零为中心的SVG 符号列表,使其使用位置更容易.例如,一个简单的圆形符号的中心为零,然后是给定的半径.然而,标准剪辑会剪掉圆圈的3/4.这是一个例子:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="400.0" height="400.0" preserveAspectRatio="xMidYMid meet"
viewBox="0.0 0.0 230.0 150.0">
<rect x="0.0" y="0.0" width="230.0" height="150.0" style="stroke:#000000; stroke-width:0.5 ; fill:#B9FFFF;"/>
<symbol id="concentric">
<circle cx="0.0" cy="0.0" r="10.0" style="stroke:#FF0000; stroke-width:0.266; fill:none"/>
<circle cx="0.0" cy="0.0" r="5.0" style="stroke:#00FF00; stroke-width:0.266; fill:none"/>
</symbol>
<use xlink:href="#concentric" x="20" y="20" />
<use xlink:href="#concentric" x="40" y="20" />
<use xlink:href="#concentric" x="60" y="20" />
</svg>
这将导致三次使用称为"同心"的符号,但由于原始符号在0,0处有两个圆,因此符号的四分之三被剪裁.
在0 0处不剪切符号的最简单方法是什么？
首先,我对这个问题进行了广泛的搜索,它应该可行.
我想用Sandcastle在Welcome.aml上添加一张图片.在Welcome.aml内:
<section>
<title>Short process description</title>
<content>
<para>
A short description
</para>
<para>
<medialinkInLine>
<image xlink:href="ShortProcess"/>
</medialinkInLine>
</para>
</content>
</section>
我已将图像添加到我的媒体文件夹并使用xlink:href中的图像ID.但没有出现.
日志文件在这里提到:
复制图像并创建媒体地图文件... C:\ blaablaaa\blaaaa\Doc\Doc\Media\ShortProcess.jpg - > C:\ blaablaaa\blaaaa\Doc\Doc\Help\Working\Media\ShortProcess.jpg Generating概念主题文件
有人有个主意吗？
我成功地将png图像转换为数据uri,然后将这些数据注入到html元素中.
//HTML part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
$("#myImage").attr("src", "data:image/png;base64," + data); // inject data:image in DOM
// data:[<mime type>][;charset=<charset>][;base64],<encoded data>
})
这证明了数据uri是正确的.
但由于某种原因,我找不到任何方法在客户端dataviz中使用d3js,因此数据uri最终显示预期的光栅图像.有些东西阻止它发挥作用.
//SVG part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
var width = 500, height = width/2;
var svg = d3.select("svg").attr("width",width).attr("style","background:#80A0b4");
svg.attr(':xmlns','http://www.w3.org/2000/svg')
.attr(':xmlns:xlink','http://www.w3.org/1999/xlink');
var g = svg.append("g").append("image")
.attr("width", width / 2)
.attr(":xlink:href", "data:image/png;base64," + data); // replace link by data URI
})
我怀疑在本机d3js xmlns名称空间中存在一些冲突,或者我输了一个拼写错误？有我的小提琴http://jsfiddle.net/xGUsu/106/.任何的想法 ？
(与我的svg中为什么我的base64编码的png不可见相关？ JS:如何将image.png编码为base64代码以进行数据URI嵌入？)