Question

假设我在SVG中创建了一些圈子，如

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

我在之后

和创建了一些通过圆圈的线条。但我不希望这些线条在我的圈子“上方”但在它们之下。我知道我可以首先创建线条然后创建圆圈，但我想首先创建圆圈然后创建线条。

有什么想法吗？

Answer 1

您是如何生成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等），然后逐个移动它们。

Answer 2

绘制两个线段而不是一条线。这是假设您不希望线条在圆圈部分中可见。

Answer 3

您可以使用与您的圈子形状相同的a clipPath or a mask

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

3 个答案: