我想为SVG元素实现SVG剪辑路径。
我想为SVG元素实现SVG剪辑路径。
提问于 2018-05-19 13:00:01
我想为SVG元素实现SVG剪辑路径。我有一个DIV元素，其中我想把SVG元素作为一个剪辑掩码，而且我还有一个单独的SVG元素，它有一个应用剪切掩码的图像。
- 我面临的第一个问题是剪辑掩码移动到视图端口的左上角，而不是位于父DIV元素的内部。
- 第二个问题是，我想要在整个屏幕上制作一个图像，而不是取决于屏幕大小。
你有什么建议吗？
提前感谢！
html, body { margin:0; padding:0; overflow:hidden }
svg { position:absolute; top:0; left:0;}
.image-clip-src {
width: 100%;
height: 100%;
}
.svg-wrapper {
width: 72px;
height: 72px;
padding: 2.5em;
border: 1px solid #4D4F51;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
position: fixed;
top: 55%;
z-index: 9;
left: 64%;
transform: translateY(-50%);
cursor: pointer;
}
.clipped-image image {
clip-path: url(#clipping);
}<svg class="clipped-image" width="100%" height="100%" viewBox="0 0 1440 960" preserveAspectRatio="xMinYMin meet">
<image class="image-clip-src" xlink:href="https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=1650&q=80" width="100%" height="100%" overflow="visible"/>
</svg>
<div class="svg-wrapper">
<svg class="svg-defs">
<defs>
<clipPath id="clipping">
<circle r="72" stroke="black" stroke-width="3"/>
</clipPath>
</defs>
</svg>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-21 03:43:54
这不是SVG的工作方式。
当您告诉某些东西要使用剪辑路径时，它只看到剪辑路径定义本身。它不知道也不关心您在页面上定位它的父<svg>的位置。
如果希望剪辑圈在水图像上的某个位置，则需要使用cx和cy指定其位置。
html, body { margin:0; padding:0; overflow:hidden }
svg { position:absolute; top:0; left:0;}
.image-clip-src {
width: 100%;
height: 100%;
}
.clipped-image image {
clip-path: url(#clipping);
}<svg class="clipped-image" width="100%" height="100%" viewBox="0 0 1440 960" preserveAspectRatio="xMinYMin meet">
<defs>
<clipPath id="clipping">
<circle cx="64%" cy="55%" r="72" stroke="black" stroke-width="3"/>
</clipPath>
</defs>
<image class="image-clip-src" xlink:href="https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=1650&q=80" width="100%" height="100%" overflow="visible"/>
<circle cx="64%" cy="55%" r="72" fill="none" stroke="#4D4F51" stroke-width="1"/>
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50429449
复制相关文章
![[踩坑]iconfont Symbol svg引入无法更改颜色](https://ask.qcloudimg.com/http-save/8227338/8085d6cd0702f73780b43af4ab986037.webp)
相似问题
原木运输如何跟踪
原木运输如何保持跟踪？
原木运输保留问题
暂时停止原木运输
对原木运输的怀疑
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
