其他已创建的“对象”下的 SVG 线

发布于 2024-10-25 05:31:33 字数 254 浏览 2 评论 0原文

假设我在 SVG 中创建了一些圆圈

<circle cx="320" cy="285" r="10" stroke="black" stroke-width="1" fill="lightblue" />

，之后我创建了一些穿过圆圈的线。但我不希望这些线位于我的圆圈“上方”，而是位于它们下方。我知道我可以先创建线条，然后创建圆圈，但我想先创建圆圈，然后创建线条。

有什么想法吗？

原文

Let's say I created some circles in SVG like

<circle cx="320" cy="285" r="10" stroke="black" stroke-width="1" fill="lightblue" />

and after that I create some lines that pass through the circles. But I don't want the lines to be "above" my circles but under them. I know I could first create the lines and then the circles but I want to create first the circles and then the lines.

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

喜爱纠缠 2024-11-01 05:31:33

您如何生成 SVG 以及您打算如何查看它？

如果您在浏览器中查看它，那么您可以使用一些 EMCAScript（本质上是 Javascript）。

例如：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  onload="init(evt)">

<script type="text/emcascript">
  <![CDATA[
    function init(evt) {

        if ( window.svgDocument == null ) {
            svgDocument = evt.target.ownerDocument;
        }

        var line_group = svgDocument.getElementById( "line-group" )
        svgDocument.documentElement.insertBefore( line_group, svgDocument.documentElement.firstChild);
    }
  ]]>
</script>

<circle cx="80" cy="80" r="40" fill="blue"/>
<circle cx="120" cy="120" r="40" fill="green"/>

<g id="line-group">
  <line x1="0" y1="10" x2="190" y2="200" stroke-width="2" stroke="black"/>
  <line x1="10" y1="0" x2="200" y2="190" stroke-width="2" stroke="black"/>
</g>

</svg>

此 SVG 在一些圆圈后面绘制一些线条，但在加载时它会使用 onload="init(evt)" 调用函数。此函数选择线组并将其移动到 SVG 的开头。

如果你的形状不成组，那就有点棘手了。您必须提供线路 ID，以便您可以轻松选择它们（例如 line1、line2 等），然后将它们一一移动。

How are you generating the SVG and how do you intend to view it?

If you're viewing it in a browser, then you could use some EMCAScript (essentially Javascript).

For example:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  onload="init(evt)">

<script type="text/emcascript">
  <![CDATA[
    function init(evt) {

        if ( window.svgDocument == null ) {
            svgDocument = evt.target.ownerDocument;
        }

        var line_group = svgDocument.getElementById( "line-group" )
        svgDocument.documentElement.insertBefore( line_group, svgDocument.documentElement.firstChild);
    }
  ]]>
</script>

<circle cx="80" cy="80" r="40" fill="blue"/>
<circle cx="120" cy="120" r="40" fill="green"/>

<g id="line-group">
  <line x1="0" y1="10" x2="190" y2="200" stroke-width="2" stroke="black"/>
  <line x1="10" y1="0" x2="200" y2="190" stroke-width="2" stroke="black"/>
</g>

</svg>

This SVG draws some lines after some circles, but when it's loaded it calls a function with onload="init(evt)". This function selects the group of lines and moves it to the beginning of the SVG.

If your shapes aren't in groups then it's a bit more tricky. You'd have to give the lines ids which allows you to select them easily (e.g. line1, line2 etc.), then move them one by one.

回复收藏 0 原文