Change fill of element inside SVG-CodePudding

My page:

The icon is an SVG. In the SVG I've organized a class "quotation-mark".

Full SVG text is here: https://dpaste.org/FQpp

Could you help me understand how to change the color of the quotation marks depending on the class.

Now my CSS looks like this:

.n-quotation-dumbbells:before {
    background-image: url("https://galina.xyz/wp-content/uploads/2021/10/quotation-dumbbells.svg");
      background-repeat: no-repeat;
      background-size: 100%;
    display: inline-block;
    content:"";
      width: 100px;
      height: 100px;
      float: left;
      margin-right: 10px;     
}

But I want to use just one background SVG image, but change the dummbells colour:

<span class="n-quotation-dumbbells lemon-fill">

So, in this case I want the colour to be lemon.

Two questions:

Is it possible?
Is changing the colour inside SVG easy in this case?
What is the easiest way (maybe changing the image itself is easier)?

CodePudding user response：

It is possible,

But to my knowledge, you'll have to either write each color you wanna add or make a loop with scss

I'll do an example for the write each color solution.

/* Here's the css solution */

span[color="orange"] *:not(defs) {
  fill: orange!important;
}
span[color="red"] *:not(defs) {
  fill: red!important;
}

/* Here's the scss solution */
$colors: [
  "green" : "#00ff00",
  "blue": "#0000ff"
]
$each $color, $value in $colors {
  span[color="#{$color}"] *:not(defs){
    fill: $value;
  }
}

<span color="orange">
  <svg
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     width="210mm"
     height="210mm"
     viewBox="0 0 210 210"
     version="1.1"
     id="svg207"
     inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
     sodipodi:docname="lemon_left.svg">
    <defs
       id="defs201" />
    <sodipodi:namedview
       id="base"
       pagecolor="#ffffff"
       bordercolor="#666666"
       borderopacity="1.0"
       inkscape:pageopacity="0.0"
       inkscape:pageshadow="2"
       inkscape:zoom="0.49497475"
       inkscape:cx="40.01939"
       inkscape:cy="181.32413"
       inkscape:document-units="mm"
       inkscape:current-layer="g104"
       showgrid="false"
       inkscape:window-width="1208"
       inkscape:window-height="960"
       inkscape:window-x="72"
       inkscape:window-y="27"
       inkscape:window-maximized="1"
       showguides="true"
       inkscape:guide-bbox="true"
       inkscape:lockguides="false" />
    <metadata
       id="metadata204">
      <rdf:RDF>
        <cc:Work
           rdf:about="">
          <dc:format>image/svg xml</dc:format>
          <dc:type
             rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
          <dc:title />
        </cc:Work>
      </rdf:RDF>
    </metadata>
    <g
       inkscape:label="Layer 1"
       inkscape:groupmode="layer"
       id="layer1"
       transform="translate(0,-87)">
      <g
         transform="matrix(0.28616797,0,0,0.28746471,-55.949769,590.11604)"
         id="g104">
        <path
           style="stroke-width:0.06735482"
           inkscape:connector-curvature="0"
           d="m 829.16053,-1409.9985 c -28.95054,-3.126 -58.51987,8.2929 -78.36909,30.4215 -7.31878,7.9638 -9.75437,11.8643 -15.25099,24.6265 -4.01515,9.2852 -6.9312,18.1976 -7.7077,23.5742 l -1.29902,8.4173 -103.02298,46.4123 c -71.13544,31.851 -103.67906,45.6595 -104.83974,44.5437 -0.94118,-0.8668 -6.70494,-4.4677 -12.85165,-7.9071 -45.81475,-25.4764 -104.34116,-4.6772 -126.15869,45.1217 -11.37,25.6884 -11.52847,49.8449 -0.67201,75.4794 11.02652,26.0319 25.07633,39.9445 50.68097,50.1861 18.44575,7.378 30.72363,8.8782 48.31951,5.9986 40.33825,-6.7822 72.40277,-41.4229 76.87427,-82.7161 0.17084,-2.5301 20.72726,-12.3574 103.40296,-49.5102 l 103.0913,-46.2166 6.56859,4.4134 c 9.32475,6.3281 27.74059,13.3722 38.2101,14.632 43.0667,5.2005 82.41609,-18.5629 97.88979,-59.1883 5.6949,-14.952 7.4573,-27.9049 6.1289,-42.7383 -2.2805,-23.9975 -12.3882,-44.9408 -29.5899,-61.417 -8.044,-7.6092 -10.7233,-9.3322 -25.97842,-15.9173 -12.14731,-5.1807 -19.52151,-7.4789 -25.4262,-8.2158 z m 29.01976,48.3434 c 8.93016,7.7953 16.77686,21.342 15.86816,27.4781 -1.668,11.0365 -16.00655,12.4523 -21.57708,2.0996 -4.6228,-8.6779 -7.10624,-10.4837 -21.42402,-16.2107 -14.31777,-5.7269 -17.33829,-6.1227 -26.28586,-3.0336 -7.27729,2.4543 -13.97388,-0.3853 -15.86003,-6.6659 -2.25859,-7.403 0.15571,-11.6414 8.60485,-15.0908 19.62535,-8.2454 43.17796,-3.8677 60.67398,11.4233 z"
           id="path1817" />
        <g
           transform="matrix(-16.657112,0,0,17.0697,-3241.3463,-8173.5724)"
           sodipodi:nodetypes="cssccsc"
           id="path1873_1_-0-2">
          <path
             id="path39-9-2"
             d="m -213.5,386.6 c 5.1,5.7 1.6,15.7 -2.7,19.5 -3.6,3.3 -9.6,6 -10.2,5 -0.9,-1.5 2.6,-2.5 5.3,-4.9 3.3,-3.6 4.4,-5.2 -0.2,-7.2 -4.9,-2.2 -5,-4.4 -5.2,-7.2 -0.3,-6.9 8,-10.2 13,-5.2 z"
             class="quotation-mark"
             inkscape:connector-curvature="0"
             style="fill:#FF0000" />
        </g>
        <g
           transform="matrix(-16.657112,0,0,17.0697,-3241.3463,-8173.5724)"
           sodipodi:nodetypes="cssccsc"
           id="path1875_1_-9-77">
          <path
             id="path42-2-6"
             d="m -232.7,386.5 c 5.1,5.7 1.6,15.7 -2.7,19.5 -3.6,3.3 -9.6,6 -10.2,5 -0.9,-1.5 2.6,-2.5 5.3,-4.9 3.3,-3.6 4.4,-5.2 -0.2,-7.2 -4.9,-2.2 -5,-4.4 -5.2,-7.2 -0.2,-6.9 8,-10.2 13,-5.2 z"
             class="quotation-mark"
             inkscape:connector-curvature="0"
             style="fill:#FF0000" />
        </g>
        <path
           style="stroke-width:0.06735482"
           inkscape:connector-curvature="0"
           d="m 811.96443,-1647.321 c -28.82304,-19.0681 -63.9884,-20.9012 -94.12136,-4.9784 -10.33066,5.4366 -26.91299,20.2817 -32.15893,28.5723 l -3.55231,5.9168 -112.4794,-6.2034 c -100.57963,-5.5422 -112.56161,-6.5217 -114.18576,-9.5082 -4.85685,-9.1664 -21.52791,-28.4286 -29.90035,-34.3511 -21.99526,-15.5821 -51.1368,-20.5112 -76.86006,-12.9251 -16.79954,5.0751 -24.77649,9.5649 -37.0892,20.8939 -28.37938,26.3134 -37.89399,66.0036 -24.59474,103.6254 4.01726,11.1576 4.88849,12.6011 18.01505,27.583 16.4871,18.8175 24.98404,24.4331 45.0096,29.6125 20.64398,5.4261 40.92461,3.8649 59.68062,-4.6415 8.68203,-3.9197 12.59274,-6.7024 23.58853,-16.8196 7.25791,-6.6781 14.55588,-14.2084 16.24952,-16.5823 l 3.05556,-4.4426 112.15436,6.2917 112.2633,6.1913 2.62542,5.7216 c 3.67,7.8117 19.87039,26.0776 28.24234,32.0097 13.11383,9.3031 31.09516,15.548 47.58512,16.4574 68.55871,3.6748 116.76727,-67.5492 89.40695,-132.3234 -5.84541,-13.9383 -20.79613,-32.135 -32.93426,-40.1 z m 3.04795,53.5691 c 4.78465,10.4517 6.48481,25.9864 3.82821,32.7008 -1.56529,3.8778 -2.33762,4.5884 -5.93604,5.4619 -2.33094,0.5136 -6.08934,0.3063 -8.44588,-0.5768 -3.90897,-1.2875 -4.50018,-1.9623 -5.70756,-6.9634 -0.67898,-3.0406 -1.5502,-8.3419 -1.99528,-11.7994 -0.52839,-5.8182 -1.49741,-7.3733 -10.67666,-17.85 l -10.17053,-11.608 -9.62829,-1.9265 c -11.18074,-2.3306 -14.3813,-5.0855 -13.8906,-12.4553 0.31787,-8.0265 5.42546,-11.7088 14.7014,-10.8785 20.50909,1.8939 39.03598,15.7831 47.92123,35.8952 z"
           id="path1815" />
      </g>
    </g>
  </svg>
</span>
<span color="red">
  <svg
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     width="210mm"
     height="210mm"
     viewBox="0 0 210 210"
     version="1.1"
     id="svg207"
     inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
     sodipodi:docname="lemon_left.svg">
    <defs
       id="defs201" />
    <sodipodi:namedview
       id="base"
       pagecolor="#ffffff"
       bordercolor="#666666"
       borderopacity="1.0"
       inkscape:pageopacity="0.0"
       inkscape:pageshadow="2"
       inkscape:zoom="0.49497475"
       inkscape:cx="40.01939"
       inkscape:cy="181.32413"
       inkscape:document-units="mm"
       inkscape:current-layer="g104"
       showgrid="false"
       inkscape:window-width="1208"
       inkscape:window-height="960"
       inkscape:window-x="72"
       inkscape:window-y="27"
       inkscape:window-maximized="1"
       showguides="true"
       inkscape:guide-bbox="true"
       inkscape:lockguides="false" />
    <metadata
       id="metadata204">
      <rdf:RDF>
        <cc:Work
           rdf:about="">
          <dc:format>image/svg xml</dc:format>
          <dc:type
             rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
          <dc:title />
        </cc:Work>
      </rdf:RDF>
    </metadata>
    <g
       inkscape:label="Layer 1"
       inkscape:groupmode="layer"
       id="layer1"
       transform="translate(0,-87)">
      <g
         transform="matrix(0.28616797,0,0,0.28746471,-55.949769,590.11604)"
         id="g104">
        <path
           style="stroke-width:0.06735482"
           inkscape:connector-curvature="0"
           d="m 829.16053,-1409.9985 c -28.95054,-3.126 -58.51987,8.2929 -78.36909,30.4215 -7.31878,7.9638 -9.75437,11.8643 -15.25099,24.6265 -4.01515,9.2852 -6.9312,18.1976 -7.7077,23.5742 l -1.29902,8.4173 -103.02298,46.4123 c -71.13544,31.851 -103.67906,45.6595 -104.83974,44.5437 -0.94118,-0.8668 -6.70494,-4.4677 -12.85165,-7.9071 -45.81475,-25.4764 -104.34116,-4.6772 -126.15869,45.1217 -11.37,25.6884 -11.52847,49.8449 -0.67201,75.4794 11.02652,26.0319 25.07633,39.9445 50.68097,50.1861 18.44575,7.378 30.72363,8.8782 48.31951,5.9986 40.33825,-6.7822 72.40277,-41.4229 76.87427,-82.7161 0.17084,-2.5301 20.72726,-12.3574 103.40296,-49.5102 l 103.0913,-46.2166 6.56859,4.4134 c 9.32475,6.3281 27.74059,13.3722 38.2101,14.632 43.0667,5.2005 82.41609,-18.5629 97.88979,-59.1883 5.6949,-14.952 7.4573,-27.9049 6.1289,-42.7383 -2.2805,-23.9975 -12.3882,-44.9408 -29.5899,-61.417 -8.044,-7.6092 -10.7233,-9.3322 -25.97842,-15.9173 -12.14731,-5.1807 -19.52151,-7.4789 -25.4262,-8.2158 z m 29.01976,48.3434 c 8.93016,7.7953 16.77686,21.342 15.86816,27.4781 -1.668,11.0365 -16.00655,12.4523 -21.57708,2.0996 -4.6228,-8.6779 -7.10624,-10.4837 -21.42402,-16.2107 -14.31777,-5.7269 -17.33829,-6.1227 -26.28586,-3.0336 -7.27729,2.4543 -13.97388,-0.3853 -15.86003,-6.6659 -2.25859,-7.403 0.15571,-11.6414 8.60485,-15.0908 19.62535,-8.2454 43.17796,-3.8677 60.67398,11.4233 z"
           id="path1817" />
        <g
           transform="matrix(-16.657112,0,0,17.0697,-3241.3463,-8173.5724)"
           sodipodi:nodetypes="cssccsc"
           id="path1873_1_-0-2">
          <path
             id="path39-9-2"
             d="m -213.5,386.6 c 5.1,5.7 1.6,15.7 -2.7,19.5 -3.6,3.3 -9.6,6 -10.2,5 -0.9,-1.5 2.6,-2.5 5.3,-4.9 3.3,-3.6 4.4,-5.2 -0.2,-7.2 -4.9,-2.2 -5,-4.4 -5.2,-7.2 -0.3,-6.9 8,-10.2 13,-5.2 z"
             class="quotation-mark"
             inkscape:connector-curvature="0"
             style="fill:#FF0000" />
        </g>
        <g
           transform="matrix(-16.657112,0,0,17.0697,-3241.3463,-8173.5724)"
           sodipodi:nodetypes="cssccsc"
           id="path1875_1_-9-77">
          <path
             id="path42-2-6"
             d="m -232.7,386.5 c 5.1,5.7 1.6,15.7 -2.7,19.5 -3.6,3.3 -9.6,6 -10.2,5 -0.9,-1.5 2.6,-2.5 5.3,-4.9 3.3,-3.6 4.4,-5.2 -0.2,-7.2 -4.9,-2.2 -5,-4.4 -5.2,-7.2 -0.2,-6.9 8,-10.2 13,-5.2 z"
             class="quotation-mark"
             inkscape:connector-curvature="0"
             style="fill:#FF0000" />
        </g>
        <path
           style="stroke-width:0.06735482"
           inkscape:connector-curvature="0"
           d="m 811.96443,-1647.321 c -28.82304,-19.0681 -63.9884,-20.9012 -94.12136,-4.9784 -10.33066,5.4366 -26.91299,20.2817 -32.15893,28.5723 l -3.55231,5.9168 -112.4794,-6.2034 c -100.57963,-5.5422 -112.56161,-6.5217 -114.18576,-9.5082 -4.85685,-9.1664 -21.52791,-28.4286 -29.90035,-34.3511 -21.99526,-15.5821 -51.1368,-20.5112 -76.86006,-12.9251 -16.79954,5.0751 -24.77649,9.5649 -37.0892,20.8939 -28.37938,26.3134 -37.89399,66.0036 -24.59474,103.6254 4.01726,11.1576 4.88849,12.6011 18.01505,27.583 16.4871,18.8175 24.98404,24.4331 45.0096,29.6125 20.64398,5.4261 40.92461,3.8649 59.68062,-4.6415 8.68203,-3.9197 12.59274,-6.7024 23.58853,-16.8196 7.25791,-6.6781 14.55588,-14.2084 16.24952,-16.5823 l 3.05556,-4.4426 112.15436,6.2917 112.2633,6.1913 2.62542,5.7216 c 3.67,7.8117 19.87039,26.0776 28.24234,32.0097 13.11383,9.3031 31.09516,15.548 47.58512,16.4574 68.55871,3.6748 116.76727,-67.5492 89.40695,-132.3234 -5.84541,-13.9383 -20.79613,-32.135 -32.93426,-40.1 z m 3.04795,53.5691 c 4.78465,10.4517 6.48481,25.9864 3.82821,32.7008 -1.56529,3.8778 -2.33762,4.5884 -5.93604,5.4619 -2.33094,0.5136 -6.08934,0.3063 -8.44588,-0.5768 -3.90897,-1.2875 -4.50018,-1.9623 -5.70756,-6.9634 -0.67898,-3.0406 -1.5502,-8.3419 -1.99528,-11.7994 -0.52839,-5.8182 -1.49741,-7.3733 -10.67666,-17.85 l -10.17053,-11.608 -9.62829,-1.9265 c -11.18074,-2.3306 -14.3813,-5.0855 -13.8906,-12.4553 0.31787,-8.0265 5.42546,-11.7088 14.7014,-10.8785 20.50909,1.8939 39.03598,15.7831 47.92123,35.8952 z"
           id="path1815" />
      </g>
    </g>
  </svg>
</span>

In my case, I apply the style to the whole svg, but you can target it more precisely if you want.

CodePudding user response：

I can help you with your question.

If you are able to modify the SVG file itself please remove inline-style style="fill:#FF0000" which makes it red.
Add respective CSS styles:

.quotation-mark {
    fill: pink;
}