如何应用相对于原始 SVG 而不是目标元素的 SVG 剪辑路径
How to apply SVG clip path relative to origin SVG instead of target element
我正在尝试将 SVG clipPath
应用于具有固定定位的单独背景 div
。我希望 clip-path
保留在原始 SVG 元素的确切位置,并在滚动(或以其他方式转换)时相应地移动。
实际发生的情况是,剪辑路径是相对于目标元素的原点插入的,并且会丢失所有定位、滚动和变换。有没有办法保留原始属性并将它们应用于单独的 div?
在下面的嵌入代码段中,蓝色圆圈是我希望 clip-path
所在的位置,而红色圆圈是它出现的位置。
#container {
clip-path: url(#myClip);
position: fixed;
width: 100vw;
height: 100vh;
background-color: red;
}
#offset-container {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
border-style: solid;
border-color: blue;
}
<div id='container'>
</div>
<div id='offset-container'>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<circle cx="50%" cy="50%" r="50%"/>
</clipPath>
</defs>
<circle cx="50%" cy="50%" r="50%" fill='blue' fill-opacity='0.5'/>
</svg>
</div>
这(几乎)在 Firefox 中有效,但在 Chrome 中无效,它显示了一个非常奇怪的错误。
您将需要两个 div:外部相对定位并定义剪辑路径以便移动。内部定位固定。显然,需要显式设置top/left/width/height,然后引用视口坐标。
body { margin: 0 }
#container {
position: relative;
overflow: hidden;
top: 202px; /* border! */
left: 202px;
clip-path: url(#myClip);
width: 200px;
height: 200px;
}
#fixed {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background-color: red;
}
#offset-container {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
border: 2px solid blue;
}
<div id='container'>
<div id="fixed"></div>
</div>
<div id='offset-container'>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<circle cx="50%" cy="50%" r="50%"/>
</clipPath>
</defs>
<circle cx="50%" cy="50%" r="50%" fill='blue' fill-opacity='0.5'/>
</svg>
</div>
我正在尝试将 SVG clipPath
应用于具有固定定位的单独背景 div
。我希望 clip-path
保留在原始 SVG 元素的确切位置,并在滚动(或以其他方式转换)时相应地移动。
实际发生的情况是,剪辑路径是相对于目标元素的原点插入的,并且会丢失所有定位、滚动和变换。有没有办法保留原始属性并将它们应用于单独的 div?
在下面的嵌入代码段中,蓝色圆圈是我希望 clip-path
所在的位置,而红色圆圈是它出现的位置。
#container {
clip-path: url(#myClip);
position: fixed;
width: 100vw;
height: 100vh;
background-color: red;
}
#offset-container {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
border-style: solid;
border-color: blue;
}
<div id='container'>
</div>
<div id='offset-container'>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<circle cx="50%" cy="50%" r="50%"/>
</clipPath>
</defs>
<circle cx="50%" cy="50%" r="50%" fill='blue' fill-opacity='0.5'/>
</svg>
</div>
这(几乎)在 Firefox 中有效,但在 Chrome 中无效,它显示了一个非常奇怪的错误。
您将需要两个 div:外部相对定位并定义剪辑路径以便移动。内部定位固定。显然,需要显式设置top/left/width/height,然后引用视口坐标。
body { margin: 0 }
#container {
position: relative;
overflow: hidden;
top: 202px; /* border! */
left: 202px;
clip-path: url(#myClip);
width: 200px;
height: 200px;
}
#fixed {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background-color: red;
}
#offset-container {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
border: 2px solid blue;
}
<div id='container'>
<div id="fixed"></div>
</div>
<div id='offset-container'>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<circle cx="50%" cy="50%" r="50%"/>
</clipPath>
</defs>
<circle cx="50%" cy="50%" r="50%" fill='blue' fill-opacity='0.5'/>
</svg>
</div>