如何在不使用内联 SVG 的情况下重叠两个 SVG 向量？

Question

我有两个使用 CSS 重叠的 SVG 矢量。参见 here。形状如下：

  <svg id="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px"   >
    <path
       id="path120"
       d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" />

   </svg>

  <svg id="path2" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
    <path
       id="path126"
       d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" />

   </svg>

如果我通过删除 position:absolute 来更改 CSS（检查以下内容），那么它们将变成两个独立的形状。它们不再重叠（在这种情况下保持相邻）。

* {
    /* position: absolute; */
}
    #path1{
    margin: 10px;
    padding: 50px;
    border: 1px solid;
}

#path2{
    margin: 10px;
    padding: 50px;
    border: 1px solid red;
}

在这个问题中：，它说 CSS 是一种解决方案，或者我可以在单个 SVG 标签（内联 SVG）中同时使用它们。

我不会用CSS；因为我需要将形状放在另一个 HTML 页面中。如果我保留 position: absolute，它会像您想象的那样造成各种混乱。
我不能使用内联 SVG；因为我正在尝试使用 Vivus 为形状设置动画。这个 JS 库要求两个形状都在一个单独的 SVG 标签中。所以我需要将形状保留在两个不同的 SVG 标签中，以使它们分别设置动画。

有没有其他天才破解这个问题？（没有 CSS 或内联 SVG）

Answer 1

您还没有真正解释 "overlap" 的确切含义。或者你的限制到底是什么。如果 SVG 没有内联，那么它们实际上就和 PNG 或 JPEG 一样。重叠它们只是使用 CSS 定位的问题。

如果您只需要绘制包含两个路径的东西，那么您可以将它们组合在一个 SVG 中。

<svg id="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px">
    <path
       id="path120"
       d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" />

    <path
       id="path126"
       d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" />
</svg>

Answer 2

您需要做的就是限制 position: absolute 的应用，方法是将该行为限制在一页而不是另一页。

例如，在下面的代码片段中，<div class="draw"> 中的 SVG 重叠，但 <div class="draw2"> 中的 SVG 不重叠。

.draw {
    height: 250px;
}
.draw svg {
 position: absolute;
}

.path1{
 margin: 10px;
 padding: 50px;
 border: 1px solid;
}
.path2{
 margin: 10px;
 padding: 50px;
 border: 1px solid red;
}

.draw2 .path1,
.draw2 .path2 {
 border: 1px solid green;
}

<div class="draw">
  <svg class="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px"   >
    <path
       id="path120"
       d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" />

   </svg>

  <svg class="path2" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
    <path
       id="path126"
       d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" />

   </svg>

</div>

<div class="draw2">
  <svg class="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px"   >
    <path
       id="path120"
       d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" />

   </svg>

  <svg class="path2" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
    <path
       id="path126"
       d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" />

   </svg>

 </div>

如何在不使用内联 SVG 的情况下重叠两个 SVG 向量？

How to overlap two SVG vectors without using inline SVG?

javascript

css

svg

overlap

vivus