CSS 背景图像 SVG 覆盖边缘
[英]CSS background-image SVG capped on edges
问题描述
我正在尝试使用虚线边框生成器，但在生成的 SVG 中，我注意到边缘被封住了，有什么想法可以避免这种情况吗？
.block { width: 400px; height: 400px; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100%25' ry='100%25' stroke='%238B98A6' stroke-width='9' stroke-dasharray='2%2c 8' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e"); }
<div class="block"> </div>
1 个解决方案
解决方案1
1 2023-02-01 13:14:01
您可以尝试添加border-radius属性吗？
.block { width: 400px; height: 400px; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100%25' ry='100%25' stroke='%238B98A6' stroke-width='9' stroke-dasharray='2%2c 8' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e"); border-radius: 100%; }
<div class="block"> </div>
SVG中的图案图片的cssAssatioRatio，例如css背景图片封面
[英]preserveAspectRatio of pattern image in SVG like css background-image cover
在 CSS 背景图像中，具有虚线圆的径向渐变，是否可以隐藏边缘的点？
[英]In CSS background-image with radial-gradient of dotted circle, is it possible to hide the dots at the edges?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.