是否可以在没有光栅化效果的情况下将一个SVG包含在另一个SVG中?我试过这个
<svg version="1.2" width="600.0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="655.813953488" width="600.0" x="0" xlink:href="A.svg" y="0"/>
<image height="740.540540541" width="600.0" x="0" xlink:href="B.svg" y="655.813953488"/>
</svg>
Run Code Online (Sandbox Code Playgroud)
这使得的合成图像A.svg和B.svg但他们失去了矢量图形属性,变成位图(在测试chrome, inkscape, inkview和eog).生成的svg将不会显示在Web浏览器中,因此外部JavaScript调用不是一个选项.如何在不复制粘贴和保留矢量化的情况下将一个svg"包含"在另一个svg中?

A.svg单独不存在效果)编辑:这是我用来测试的确切图像:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="129pt" height="141pt" viewBox="0 0 129 141" version="1.2">
<defs>
<g>
<symbol overflow="visible" id="glyph0-0">
<path style="stroke:none;" d="M 133.296875 0 L 133.296875 -5.1875 C 122.734375 -5.1875 119.15625 -5.1875 116.5625 -12.546875 L 72.328125 -137.6875 C 71.328125 -140.265625 …Run Code Online (Sandbox Code Playgroud) 因此,鉴于此HTML,背景图像在Firefox,IE和Chrome中加载得很好.但在Safari中,它只是忽略它.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 141.72999572753906 255.1199951171875">
<image xlink:href="http://labels.labellogiclive.com/alfresco_10_p1_alf001_uk__v0.svg" preserveAspectRatio="none" x="0" y="0" width="141.73" height="255.12"></image>
</svg>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
现在我认为它可能是一个服务器问题,没有给出正确的标题,但我已经检查过它看起来不错(image/svg+xml).所以我有点亏......有什么想法吗?
我正在使用 python 创建一堆我的数据图,然后 Inkscape 在主图的面板中布置单独的图和原理图。我还添加了一些额外的元素,例如面板名称和标题。
每次我修改 Python 代码中的某些内容时,我都必须手动将 svg/pdf 图粘贴到 Inkscape 中。我注意到,如果我将绘图创建为光栅图像而不是矢量,我可以在 Inkscape 文档中插入一个链接,并且每次我在 python 中重新生成绘图时都会更新图形面板,这是惊人的!
目前我正在使用这种具有高 DPI 的方法,但理想情况下,我想插入一个指向 svg/pdf 文件的链接,以便整个图形是一个矢量,而不是一个高 DPI、大尺寸的光栅。我已经看到可以在 Adobe Illustrator .ai 文件中以这种方式包含 pdf(不认为 svgs 工作),我想知道是否有任何方法可以在 Inkscape 中做到这一点?
当我插入图像链接时,Inkscape 在 svg 中创建一个类似于此的标签
<image
sodipodi:absref="path/to/image.png"
xlink:href="./image.png"
y="14.014872"
x="5.9285898"
id="image12160"
preserveAspectRatio="none"
height="441.91879"
width="466.55328" />
Run Code Online (Sandbox Code Playgroud)
我可以修改路径以指向 svg 文件,但 Inkscape 会自动将 svg 转换为低分辨率光栅。如果我将路径更改为 pdf,则会出现错误。有什么我可以在 svg 代码中修改的东西,以便能够链接 pdf/svg 文件并让它们在 Inkscape 中呈现为矢量文件?
是否存在可以智能处理递归(即自引用)svg 文件的现有渲染器?
例如,这个问题的代码:
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="-50" cy="-50" r="30" style="fill:red" />
<image x="10" y="20" width="80" height="80" xlink:href="recursion.svg" />
</svg>
Run Code Online (Sandbox Code Playgroud)
在 Firefox、Chrome 或 Inkscape 中无法正确渲染 - 但 制作一个渲染器来跟踪打开特定文件的次数,并在一定次数的迭代后停止似乎并不困难......
(如果不存在,如果我想自己编写一个代码,我可以去哪里寻找?)
我是SVG和D3的新手,在我实施的过程中学习.面对我目前正在处理的其中一个网站的问题.
要求:
我们想要创建一个自定义图形(类似于条形图),它具有一组代表我的数据点的条形图,并且某些图标根据条形图数据的类型嵌入到这些条形图中.该图表代表了一个人在整个职业生涯中取得的成就.在栏上悬停时,我们会显示一个自定义弹出窗口,其中包含该栏的简要说明(请参阅下面的示例).一些条形图有一个额外的箭头,表示条形图是否代表用户当前正在追求的体验.
到目前为止的进展:
您可以在TIMELINE部分看到我的个人资料.
那么,什么错了?
Chrome上的一切正常(如截图所示).所有其他浏览器在没有图标的情况下渲染图形 您可以在Chrome和Firefox上查看我的个人资料.
我复制了d3生成的SVG HTML代码并将其粘贴在jsfiddle中以在所有浏览器上测试它并发现所有浏览器都在渲染它:(忽略颜色,我没有应用CSS,但图标显示)http:/ /jsfiddle.net/EbpPG/1/
See JS fiddle link
Run Code Online (Sandbox Code Playgroud)
检查我的个人资料以查看图表.生成图形的逻辑可以在chart.js文件createTimelineChart()函数中找到.
有人可以看看它,让我知道我犯的是什么错误?
我不能超过2级.(尝试过Iceweasel和Chromium.)
作为测试,我尝试了在此前面的回复中提供的代码的变体.这个包含3个单独的文件,其中a.svg包括b.svg,b.svg包括c.svg.(注意: 这不是一个循环.)
<!-- a.svg -->
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="-50" cy="-50" r="30" style="fill:#b58900" />
<image x="10" y="20" width="80" height="80" xlink:href="b.svg" />
</svg>
Run Code Online (Sandbox Code Playgroud)
<!-- b.svg -->
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="-50" cy="-50" r="30" style="fill:#cb4b16" />
<image x="10" y="20" width="80" height="80" xlink:href="c.svg" />
</svg>
Run Code Online (Sandbox Code Playgroud)
<!-- c.svg -->
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1" …Run Code Online (Sandbox Code Playgroud)