0

I've my svg. I know I can set the fill to change the fill color. So if I set:

.heart path {
  fill: green
}

the hearth turns green. But I don't want that, I only want to change the outline color to green, currently it's #66a6d9 and I need to do it in CSS as I need to be able to override this on a per site basis

<svg class="heart" xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15">
  <g id="heart" fill="none" stroke-miterlimit="10">
    <path d="M8,15,6.84,13.937C2.72,10.1,0,7.6,0,4.5A4.386,4.386,0,0,1,4.4,0,4.7,4.7,0,0,1,8,1.717,4.7,4.7,0,0,1,11.6,0,4.386,4.386,0,0,1,16,4.5c0,3.106-2.72,5.6-6.84,9.441Z" stroke="none"/>
    <path d="M 8 13.64373970031738 L 8.48186206817627 13.20225715637207 L 8.644049644470215 13.05103969573975 C 12.47146034240723 9.482660293579102 15 7.125249862670898 15 4.49590015411377 C 15 3.53331995010376 14.65030956268311 2.645900011062622 14.01533985137939 1.997089982032776 C 13.38607025146484 1.3541100025177 12.52828979492188 1 11.60000038146973 1 C 10.53046035766602 1 9.472579956054688 1.506360054016113 8.770179748535156 2.354510068893433 L 8.000020027160645 3.284480094909668 L 7.22983980178833 2.354520082473755 C 6.527400016784668 1.506360054016113 5.469510078430176 1 4.400000095367432 1 C 3.471709966659546 1 2.613929986953735 1.3541100025177 1.984660029411316 1.997089982032776 C 1.349689960479736 2.645900011062622 1 3.53331995010376 1 4.49590015411377 C 1 7.125249862670898 3.528589963912964 9.482709884643555 7.356080055236816 13.05115985870361 L 7.518139362335205 13.2022590637207 L 8 13.64373970031738 M 8 15 L 6.839849948883057 13.9370698928833 C 2.719919919967651 10.09539031982422 0 7.601950168609619 0 4.49590015411377 C 0 1.9617600440979 1.919919967651367 -8.881784197001252e-16 4.400000095367432 -8.881784197001252e-16 C 5.799960136413574 -8.881784197001252e-16 7.119880199432373 0.653980016708374 8 1.71668004989624 C 8.880080223083496 0.653980016708374 10.19995975494385 -8.881784197001252e-16 11.60000038146973 -8.881784197001252e-16 C 14.08008003234863 -8.881784197001252e-16 16 1.9617600440979 16 4.49590015411377 C 16 7.601990222930908 13.28003978729248 10.09543037414551 9.160149574279785 13.9370698928833 L 8 15 Z" stroke="none" fill="#66a6d9"/>
  </g>
</svg>

Fiddle: https://jsfiddle.net/082bnjue/

Nicola Peluchetti
  • 76,206
  • 31
  • 145
  • 192
  • 1
    You need to target that specific 2nd `path`, so give it an id of its own: https://jsfiddle.net/pqmoxgjf/ – Asons Apr 15 '19 at 17:22
  • Or something like `svg.heart path + path { fill: lime; }` – Asons Apr 15 '19 at 17:25
  • I also closed this as a dupe, as I guess you simply _missed_ to adjust the selector to the correct element. – Asons Apr 15 '19 at 17:28
  • And btw, that _outline_ of yours is not actually an outline, it is the visual part of the first heart, place behind the second heart, hence you need to use `fill`. It might be better to drop one heart, and instead use `stroke` to color the outline. – Asons Apr 15 '19 at 17:46
  • Here's one: https://jsfiddle.net/hadL3nup/ – Asons Apr 15 '19 at 17:54

0 Answers0