How to remove the background color from the edges of an svg

user_7555658 0
Viewed 1250

I have an SVG image:

svg image

I set the fill to be yellow and I am trying to set the ! only to be black but when I set the background color to be black it takes up the entire SVG tag around the div.

Is there a way I can remove the black background color outside the circle and only apply the black color on the ! mark? If I am missing something that will be needed in order to answer this question please let me know. I will try to explain it further.

svg css html
2 Answers

Here's a new version for ya :)

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#F2C21C;}
</style>
<path class="st0" d="M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14S23.7,2,16,2z M14.9,8h2.2v11h-2.2C14.9,19,14.9,8,14.9,8z
     M16,25c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22c0.8,0,1.5,0.7,1.5,1.5S16.8,25,16,25z"/>
<rect x="38.1" y="-31.4" class="st0" width="85.6" height="96.6"/>
<rect x="14.9" y="8" width="2.2" height="11"/>
<circle cx="16" cy="23.5" r="1.5"/>
</svg>

user_23241540

Here is the same circle, taken form Dan his answer, 3 times

With no fill on an SVG element, the default color is undefined, which in turn fills the element black

SVG #one styles those elements with a CSS fill (applied to all SVG elements without a fill)
(remove the CSS and the question mark will be undefined/black)

SVG #two explicitly styles both circles, fill=lightcoral

With SVG #three you can easily style the grouped questionmark
(there are no other SVG elements inside this SVG, so SVG #one does the same)

SVG #four shows you can style everything with one CSS Selector
(there is no text in the SVG [to get the CSS color value],
the CSS color value can be referenced with currentColor)

<style>
  svg         { width:21vw; background:grey }
  #one        { fill:red }
  #two circle { fill:lightcoral }

  #three #questionmark {
    fill:green;
  }
  #four {
    background: green;
    color:      #F2C21C;
    fill:       black;
  }
</style>
<svg id=one viewBox="0 0 32 32">
    <circle fill="#F2C21C" cx="16" cy="16" r="16" />
    <rect x="14.9" y="8" width="2.2" height="11"/>
    <circle cx="16" cy="23.5" r="1.5"/>
</svg>
<svg id=two viewBox="0 0 32 32">
    <circle fill="#F2C21C" cx="16" cy="16" r="16" />
    <rect x="14.9" y="8" width="2.2" height="11"/>
    <circle cx="16" cy="23.5" r="1.5"/>
</svg>
<svg id=three viewBox="0 0 32 32">
    <circle fill="#F2C21C" cx="16" cy="16" r="16" />
    <g id="questionmark">
      <rect x="14.9" y="8" width="2.2" height="11"/>
      <circle cx="16" cy="23.5" r="1.5"/>
    </g>
</svg>
<svg id=four viewBox="0 0 32 32">
    <circle fill="currentColor" cx="16" cy="16" r="16" />
    <rect x="14.9" y="8" width="2.2" height="11"/>
    <circle cx="16" cy="23.5" r="1.5"/>
</svg>

user_25208000
Related