html css填充一个svg但只有50%的高度[重复]答案

【问题标题】：html css fill a svg but only 50% height [duplicate]html css填充一个svg但只有50%的高度[重复]
【发布时间】：2021-06-10 20:44:33
【问题描述】：

您好，我有一个跨度的 svg（心形）

我想要做的基本上是我想用红色填充 svg，但只有 50% 的高度，我不能影响跨度

<span class="ikoncircle" id="can"><svg class="genelsvgs" id="katman_1" data-name="katman 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><title>kalp</title><path class="cls-1" d="M1.11,13.75c.13-4,1.58-7.26,5.5-8.88,4.08-1.68,7.85-.84,11.3,1.77a4.22,4.22,0,0,1,.91.88c.75,1,1.37.93,2.26,0A11.36,11.36,0,0,1,29.25,4c6.45-.16,10.52,5.52,9.48,11.56-.78,4.55-3.46,8.06-6.3,11.5-3.26,4-7.35,7-11.17,10.36A1.63,1.63,0,0,1,19,37.6C12.87,32.83,7.05,27.76,3.1,20.94A13.31,13.31,0,0,1,1.11,13.75Z"/></div></svg></span>

.ikoncircle {
position: absolute;
box-sizing: border-box;
display: inline-block;
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: rgba(20, 19, 23, 0.8);}

#can {
right: 0.1%;
bottom: 24%;}

.genelsvgs {
position: absolute;
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
width: 26px;}

我在绘画中做了一个例子

目前的样子

我想做什么

【问题讨论】：

你必须使用颜色渐变。我一会儿看看能不能复制。

标签： html css svg fill

【解决方案1】：

您可以通过clipPath 联系我们

.ikoncircle {
  position: absolute;
  box-sizing: border-box;
  display: inline-block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(20, 19, 23, 0.8);
}

#can {
  right: 0.1%;
  bottom: 24%;
}

.genelsvgs {
  position: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  width: 26px;
}

.cls-1 {
  fill: red;
}

.bg {
  fill: #fff;
}

<span class="ikoncircle" id="can">
  <svg class="genelsvgs" id="katman_1" data-name="katman 1"   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
    <defs>
      <clipPath id="cut-off-bottom">
        <rect x="0" y="20" width="200" height="20" />
      </clipPath>
    </defs>
    <title>kalp</title>

    <path class="bg" d="M1.11,13.75c.13-4,1.58-7.26,5.5-8.88,4.08-1.68,7.85-.84,11.3,1.77a4.22,4.22,0,0,1,.91.88c.75,1,1.37.93,2.26,0A11.36,11.36,0,0,1,29.25,4c6.45-.16,10.52,5.52,9.48,11.56-.78,4.55-3.46,8.06-6.3,11.5-3.26,4-7.35,7-11.17,10.36A1.63,1.63,0,0,1,19,37.6C12.87,32.83,7.05,27.76,3.1,20.94A13.31,13.31,0,0,1,1.11,13.75Z"/>
    <path class="cls-1" d="M1.11,13.75c.13-4,1.58-7.26,5.5-8.88,4.08-1.68,7.85-.84,11.3,1.77a4.22,4.22,0,0,1,.91.88c.75,1,1.37.93,2.26,0A11.36,11.36,0,0,1,29.25,4c6.45-.16,10.52,5.52,9.48,11.56-.78,4.55-3.46,8.06-6.3,11.5-3.26,4-7.35,7-11.17,10.36A1.63,1.63,0,0,1,19,37.6C12.87,32.83,7.05,27.76,3.1,20.94A13.31,13.31,0,0,1,1.11,13.75Z" clip-path="url(#cut-off-bottom)"/>
  </svg>
</span>

【讨论】：