Question

假设我有一个包含多个路径的SVG，即多个路径。

现在，通常当我想为这些路径定义除黑色之外的任何其他颜色时，我必须将属性fill添加到每个路径，因此：

<?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">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="626px" height="626px" viewBox="0 0 626 626" enable-background="new 0 0 626 626" xml:space="preserve">
<g>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#AAAAAA" d="M294,0c12.667,0,25.333,0,38,0c88.112,7.338,153.67,43.67,202,92
        c48.323,48.323,84.693,113.876,92,202c0,12.667,0,25.333,0,38c-7.359,88.111-43.662,153.662-92,202
        c-48.322,48.322-113.885,84.687-202,92c-12.667,0-25.333,0-38,0c-88.111-7.318-153.68-43.68-202-92
        C43.668,485.668,7.337,420.11,0,332c0-12.667,0-25.333,0-38c6.457-85.974,43.913-153.913,92-202
        C141.708,42.292,207.806,7.179,294,0z M194,88c-28.938,15.035-51.978,34.886-71,56c-38.683,42.939-69.556,103.898-63,189
        c5.873,76.241,38.505,127.85,84,169c42.815,38.728,105.77,70.049,188,64c76.057-5.595,129.564-38.535,170-83
        c39.96-43.942,69.723-105.461,64-188c-5.418-78.137-39.625-130.29-83-170c-42.661-39.056-105.909-71.144-189-65
        C256.167,62.797,221.973,73.467,194,88z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#AAAAAA" d="M190,158c4.239-0.794,13.672-0.847,18,1c32.859,14.024,33.146,82.464,10,105
        c-12.193,11.871-33.895,12.294-46-1C146.459,234.952,153.117,164.914,190,158z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#AAAAAA" d="M425,158c58.484-10.422,56.673,116.826,5,116
        C380.189,273.204,378.901,166.215,425,158z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#AAAAAA" d="M118,315c52.16,27.927,115.198,51,196,51c74.84,0,142.62-22.48,194-51
        c-9.593,93.905-69.282,171.673-156,190c-20.939,4.426-55.349,4.787-78,0c-86.549-18.291-143.611-93.224-156-187
        C118,317,118,316,118,315z"/>
</g>
</svg>

有没有办法为SVG的所有路径或SVG中组中的所有路径定义填充颜色，仅一次？

类似：

<g fill="#AAAAAA">
    ...
</g>

我无法使用CSS。

Answer 1

是的，就像这样http://jsfiddle.net/link2twenty/162y90L9 但你需要从其他所有行中删除它，否则它会覆盖它。

<svg fill="darkgreen" version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="626px" height="626px" viewBox="0 0 626 626" enable-background="new 0 0 626 626" xml:space="preserve">
    <g>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M294,0c12.667,0,25.333,0,38,0c88.112,7.338,153.67,43.67,202,92
        c48.323,48.323,84.693,113.876,92,202c0,12.667,0,25.333,0,38c-7.359,88.111-43.662,153.662-92,202
        c-48.322,48.322-113.885,84.687-202,92c-12.667,0-25.333,0-38,0c-88.111-7.318-153.68-43.68-202-92
        C43.668,485.668,7.337,420.11,0,332c0-12.667,0-25.333,0-38c6.457-85.974,43.913-153.913,92-202
        C141.708,42.292,207.806,7.179,294,0z M194,88c-28.938,15.035-51.978,34.886-71,56c-38.683,42.939-69.556,103.898-63,189
        c5.873,76.241,38.505,127.85,84,169c42.815,38.728,105.77,70.049,188,64c76.057-5.595,129.564-38.535,170-83
        c39.96-43.942,69.723-105.461,64-188c-5.418-78.137-39.625-130.29-83-170c-42.661-39.056-105.909-71.144-189-65
        C256.167,62.797,221.973,73.467,194,88z" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M190,158c4.239-0.794,13.672-0.847,18,1c32.859,14.024,33.146,82.464,10,105
        c-12.193,11.871-33.895,12.294-46-1C146.459,234.952,153.117,164.914,190,158z" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M425,158c58.484-10.422,56.673,116.826,5,116
        C380.189,273.204,378.901,166.215,425,158z" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M118,315c52.16,27.927,115.198,51,196,51c74.84,0,142.62-22.48,194-51
        c-9.593,93.905-69.282,171.673-156,190c-20.939,4.426-55.349,4.787-78,0c-86.549-18.291-143.611-93.224-156-187
        C118,317,118,316,118,315z" />
    </g>
  </svg>

仅在SVG中定义所有路径的颜色一次

1 个答案: