когда я добавляю второй svg, основной цвет первого изменения svg

Question

Я просто создаю изображение svg с corel и помещаю коды в html файл

проблема появляется сразу после добавления второго svg

при добавлении основного цвета первого svg, к сожалению, изменить

я не понял, почему

кто-нибудь может мне помочь, пожалуйста?

это второй svg-код

   <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <!-- Creator: CorelDRAW 2020 (64-Bit) -->
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.01666in" height="0.349992in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
    viewBox="0 0 1016.66 349.99"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
     <defs>
      <style type="text/css">
       <![CDATA[
        .fil0 {fill:none;fill-rule:nonzero}
        .fil1 {fill:aqua}
        .fil2 {fill:#4D4D4D}
        .fil3 {fill:#4D4D4D;fill-rule:nonzero}
       ]]>
      </style>
     </defs>
     <g id="Layer_x0020_1">
      <metadata id="CorelCorpID_0Corel-Layer"/>
      <line class="fil0" x1="863.63" y1="344.11" x2="863.63" y2= "14" />
      <path class="fil1" d="M30.44 89.61c181.75,-21.86 824.36,-155.39 957.11,-11.98 9.87,10.66 16.93,22.86 20.76,36.74l-977.87 -24.76z"/>
      <path class="fil2" d="M8.31 243.2c55.39,200.63 782.61,48.24 977.87,24.76l-977.87 -24.76z"/>
      <path class="fil3" d="M453.54 205.35c-6.22,0 -10.77,-0.74 -13.61,-2.25 -1.43,-0.77 -6.41,-4.75 -14.91,-11.94 -5.38,10.46 -14.1,15.67 -26.09,15.67 -7.87,0 -14.36,-2.35 -19.5,-7.02 -5.12,-4.7 -7.69,-10.66 -7.69,-17.85 0,-7.54 5.52,-16.36 16.56,-26.45l-4.04 -4.2 9.58 -8.85 42.75 41.5c3.74,3.63 6.15,5.74 7.2,6.3 2,1.11 5.25,1.8 9.74,2.03l0 13.05zm-40.8 -22.5c0,-3.19 -0.92,-5.59 -2.7,-7.19l-11.47 -10.43c-4.44,3.81 -7.23,6.38 -8.33,7.69 -2.79,3.29 -4.19,6.6 -4.19,9.94 0,3.36 1.24,6.11 3.73,8.21 2.46,2.1 5.57,3.17 9.33,3.17 3.65,0 6.81,-1.09 9.55,-3.24 2.7,-2.15 4.09,-4.85 4.09,-8.13z"/>
      <path id="1" class="fil3" d="M512.75 180.86c0,7.49 -2.03,13.62 -6.09,18.39 -4.44,5.27 -10.64,7.89 -18.62,7.89 -6.09,0 -11.44,-1.63 -16.07,-4.89 -4.6,1.83 -12.67,2.87 -24.17,3.11l0 -13.05c8.12,0 12.85,-0.72 14.23,-2.18 0.41,-0.47 0.7,-3.81 0.87,-9.98 0.49,-17.9 8.98,-26.85 25.54,-26.85 7.93,0 14.1,2.89 18.54,8.68 3.84,5.07 5.77,11.37 5.77,18.89zm-12.5 -0.77c0,-9.37 -4.09,-14.04 -12.23,-14.04 -8.31,0 -12.44,4.85 -12.44,14.56 0,8.97 4.14,13.47 12.44,13.47 8.15,0 12.23,-4.67 12.23,-13.99z"/>
      <path id="2" class="fil3" d="M579.58 207.01c0,8.67 -3.57,16.07 -10.74,22.15 -7.17,6.08 -15.56,9.12 -25.11,9.12l-18.5 0 -1.81 -13.05 18.02 0c6.76,0 12.36,-1.78 16.8,-5.36 4.44,-3.56 6.79,-8.41 7.06,-14.54 -11.88,0 -20.54,-1.46 -25.93,-4.35 -7.17,-3.86 -10.77,-10.8 -10.77,-20.84 0,-10.9 2.84,-18.54 8.49,-22.94 3.46,-2.69 9.28,-4.06 17.43,-4.06 10.85,0 18.07,4.15 21.72,12.46 2.22,5.17 3.33,13.5 3.33,25.04l0 16.37zm-14.28 -14.69l0 -13.4c0,-8.48 -3.74,-12.73 -11.2,-12.73 -4.55,0 -7.63,1.41 -9.2,4.2 -1.11,2.03 -1.68,5.36 -1.68,10.06 0,5.49 2.41,9.02 7.22,10.56 2.59,0.87 7.55,1.31 14.86,1.31z"/>
      <path id="3" class="fil3" d="M648.26 129.02c0,2.57 -0.95,4.72 -2.84,6.5 -1.89,1.76 -4.25,2.65 -7.04,2.65 -7.28,0 -10.91,-3.04 -10.91,-9.15 0,-5.26 3.49,-7.91 10.45,-7.91 6.9,0 10.33,2.65 10.33,7.91zm0.65 74.09c0,9.54 -3.28,17.72 -9.85,24.54 -6.87,7.07 -15.5,10.63 -25.87,10.63l-18.89 0 -2.38 -13.35 16.07 0c6.87,0 12.83,-1.51 17.81,-4.5 5.66,-3.46 8.5,-8.23 8.5,-14.26l0 -41.72 14.61 0 0 38.66z"/>
      <path id="4" class="fil3" d="M718.04 203.08c0,9.62 -3.27,17.82 -9.82,24.62 -6.82,7.04 -15.43,10.58 -25.84,10.58l-19.02 0 -2.3 -13.35 16.1 0c6.9,0 12.8,-1.51 17.7,-4.5 5.7,-3.46 8.57,-8.23 8.57,-14.26l0 -41.75 14.61 0 0 38.66z"/>
     </g>
    </svg>

Я не добавляю первый, потому что это примерно 1400 строк

Answer 1

SVG аналогичен другим HTML элементам в основном DOM .

Таким образом, любой СТИЛЬ, который вы применяете, применяется ко всем элементам в документе с тем же CSS селектор.

Внимательно посмотрите на селекторы CSS. вы увидите 2 круга, какого цвета? Затем нажмите кнопку «Выполнить фрагмент кода», чтобы подтвердить свой ответ

<svg xmlns='http://www.w3.org/2000/svg' width='40'>
  <style>
   .fill_one{
      fill:green;
   }
  </style>
  <circle class='fill_one' cx='20' cy='20' r='15' stroke-width='5'/>
</svg>

<svg xmlns='http://www.w3.org/2000/svg' width='40'>
  <style>
   .fill_one{
      fill:yellow;
   }
  </style>
  <circle class='fill_two' cx='20' cy='20' r='15' stroke-width='5' fill='lightgreen'/>
</svg>

<style>
  .fill_two{
    fill:blue;
  }
  circle {
    stroke:red
  }
</style>