如何在保持中心圆的大小及其高度的同时使 svg 拉伸到父级的宽度？答案

【问题标题】：How can I make the svg stretch to the width of the parent while keeping the size of the central circle and its height?如何在保持中心圆的大小及其高度的同时使 svg 拉伸到父级的宽度？
【发布时间】：2021-05-01 11:39:23
【问题描述】：

它是 320px 宽，但是当容器变大时，我只希望 svg 的宽度变大，保持中心圆的大小

<svg width="320" height="64" viewBox="0 0 320 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M160 39C177.673 39 192 24.6731 192 7C192 4.59551 191.735 2.25296 191.232 0L320 0V64H0V0L128.768 0C128.265 2.25296 128 4.59551 128 7C128 24.6731 142.327 39 160 39Z" fill="#0E0B16"/>
</svg>

还有其他方法可以只使用 html 和 css 吗？

【问题讨论】：

去掉宽高属性
您能添加一张您的目标的图片吗？
@Rojo 我刚刚上传了一张图片（手机）
你能多贴一些代码吗，比如容器和搜索图片？

标签： html css svg responsive-design header

【解决方案1】：

仅使用 CSS 的解决方案：

.box {
  height:80px;
  background:black; /*              radius at position          */
  -webkit-mask:radial-gradient(circle 30px at 50% 5px,transparent 97%,#fff);
}

<div class="box">

</div>

另一种更受支持的语法：

.box {
  height:80px;
  background:black; 
  -webkit-mask:
    radial-gradient(circle 30px,transparent 97%,#fff)
    0 100%/
    100% 190%; /* adjust the 190% to control the position */
}

<div class="box">

</div>

【讨论】：