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;
}

在这个问题：How to overlap two SVG images?中，它说CSS是一个解决方案，或者我可以在单个SVG标记（内联SVG）中使用它们。

我不能使用CSS;因为我需要将形状放在另一个HTML页面中。如果我保留position: absolute，就会产生各种各样的混乱。
我不能使用内联SVG;因为我试图使用Vivus为形状设置动画。这个JS库要求两个形状都在一个单独的SVG标记内。所以我需要将形状保存在两个不同的SVG标签中，以使它们分别进行动画制作。

这个问题还有其他任何天才黑客攻击吗？（没有CSS或内联SVG）

Answer 1

您需要做的就是通过将该行为限制在一个页面而不是另一个页面来限制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>

Answer 2

你还没有真正用“重叠”来解释你的意思。或者你的限制究竟是什么。如果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>

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

2 个答案: