Question

标记

<div class="pink-circle text-center">
        <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <mask id="maskCalendarHome" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="5" width="48" height="54">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M50.6667 10.6666H48V7.99998C48 6.53331 46.8 5.33331 45.3333 5.33331C43.8667 5.33331 42.6667 6.53331 42.6667 7.99998V10.6666H21.3333V7.99998C21.3333 6.53331 20.1333 5.33331 18.6667 5.33331C17.2 5.33331 16 6.53331 16 7.99998V10.6666H13.3333C10.3733 10.6666 8 13.0666 8 16V53.3333C8 56.2666 10.4 58.6666 13.3333 58.6666H50.6667C53.6 58.6666 56 56.2666 56 53.3333V16C56 13.0666 53.6 10.6666 50.6667 10.6666ZM32 18.6666C36.4267 18.6666 40 22.24 40 26.6666C40 31.0933 36.4267 34.6666 32 34.6666C27.5733 34.6666 24 31.0933 24 26.6666C24 22.24 27.5733 18.6666 32 18.6666ZM16 48.0006V50.6673H48V48.0006C48 42.6673 37.3333 39.734 32 39.734C26.6667 39.734 16 42.6673 16 48.0006Z" fill="black"/>
            </mask>
            <g mask="url(#maskCalendarHome)">
                <rect width="64" height="64" fill="#FF5F8F"/>
            </g>
        </svg>
    </div>

CSS

.pink-circle {
height:120px;
width:120px;
background: #FF5F8F;
opacity:0.1;
border-radius: 100%;}

预期结果

当前结果

Answer 1

svg 就在那里，但是您在父级中使用了 opacity，这会影响子级。

您可能希望使用带有 background-color 值的 rgba 来为父级添加透明度。

像这样：

.pink-circle {
height:120px;
width:120px;
background-color:rgba(0,0,0, 0.1);
border-radius: 100%;
position:relative;
}
svg {
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  margin:auto;
}

<div class="pink-circle text-center">
        <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <mask id="maskCalendarHome" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="5" width="48" height="54">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M50.6667 10.6666H48V7.99998C48 6.53331 46.8 5.33331 45.3333 5.33331C43.8667 5.33331 42.6667 6.53331 42.6667 7.99998V10.6666H21.3333V7.99998C21.3333 6.53331 20.1333 5.33331 18.6667 5.33331C17.2 5.33331 16 6.53331 16 7.99998V10.6666H13.3333C10.3733 10.6666 8 13.0666 8 16V53.3333C8 56.2666 10.4 58.6666 13.3333 58.6666H50.6667C53.6 58.6666 56 56.2666 56 53.3333V16C56 13.0666 53.6 10.6666 50.6667 10.6666ZM32 18.6666C36.4267 18.6666 40 22.24 40 26.6666C40 31.0933 36.4267 34.6666 32 34.6666C27.5733 34.6666 24 31.0933 24 26.6666C24 22.24 27.5733 18.6666 32 18.6666ZM16 48.0006V50.6673H48V48.0006C48 42.6673 37.3333 39.734 32 39.734C26.6667 39.734 16 42.6673 16 48.0006Z" fill="black"/>
            </mask>
            <g mask="url(#maskCalendarHome)">
                <rect width="64" height="64" fill="#FF5F8F"/>
            </g>
        </svg>
    </div>

已编辑：我添加了一些 css 以将您的 svg

居中

Answer 2

填充、不透明度和蒙版.. 我什至无法解释发生了什么
那个图标是为 80x80 的 viewBox 设计的
需要清理
您可以在 SVG 中完成所有操作：

<style>
  svg {
    height: 120px;
    width: 120px;
    opacity: 0.5;
  }
  svg:hover {
    opacity: 1
  }
</style>
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
  <circle fill="#FF5F8F" cx="50%" cy="50%" r="50%"/>
  <path   fill="red"     d="m59 18h-3v-3c0-1-1-3-3-3c-1 0-2 2-2 3v3h-22v-3c0-1-1-3-2-3
  c-2 0-3 2-3 3v3h-3c-3 0-5 2-5 5v37c0 3 2 6 5 6h38c3 0 5-3 5-6v-37c0-3-2-5-5-5zm-19 8
  c4 0 8 3 8 8c0 4-4 8-8 8c-4 0-8-4-8-8c0-5 4-8 8-8zm-16 29v3h32v-3c0-5-11-8-16-8
  c-5 0-16 3-16 8z" fill-rule="evenodd"/>
</svg>

详细解释：

How do I centre an svg path in an svg circle?

为什么我在圆圈中的 SVG 图标不可见？

2 个答案: