title: html css fill a svg but only 50% height
body: <p>Hello I have a svg (heart shape) in a span</p>
  <p>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</p>
  <pre><code>&lt;span class=&quot;ikoncircle&quot; id=&quot;can&quot;&gt;&lt;svg class=&quot;genelsvgs&quot; id=&quot;katman_1&quot; data-name=&quot;katman 1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 40 40&quot;&gt;&lt;defs&gt;&lt;style&gt;.cls-1{fill:#fff;}&lt;/style&gt;&lt;/defs&gt;&lt;title&gt;kalp&lt;/title&gt;&lt;path class=&quot;cls-1&quot; d=&quot;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&quot;/&gt;&lt;/div&gt;&lt;/svg&gt;&lt;/span&gt;
  
  .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;}
  </code></pre>
  <p>I made a example in paint</p>
  <p>currently how its looks like
  <a href="https://i.stack.imgur.com/T1iYB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T1iYB.png" alt="currently how its looks like" /></a></p>
  <p>what am I trying to do
  <a href="https://i.stack.imgur.com/srQvZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/srQvZ.png" alt="what am I trying to do" /></a></p>