html css 填充 svg 但只有 50% 的高度 [英] html css fill a svg but only 50% height

问题描述

你好，我有一个 svg(心形)

Hello I have a svg (heart shape) in a span

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

what am I trying to do is basicly I want to fill the svg with red but only in 50% height and I mustn't effect the span

<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;}

我在油漆中做了一个例子

I made a example in paint

目前的样子

我想做什么

推荐答案

您可以使用 clipPath 来做到这一点

You can us a clipPath to do so

.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>

这篇关于html css 填充 svg 但只有 50% 的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！