代码之家  ›  专栏  ›  技术社区  ›  KevinM

同一页面中的多个SVG问题-消失和颜色更改

  •  2
  • KevinM  · 技术社区  · 6 年前

    在同一页面中放置多个SVG时,我遇到了一些问题: A) 我将一个图标放在另一个图标旁边,在放置第二个SVG后,第一个图标在浏览器中显示为空白。我认为这与第二个svg的style标记中的多个类/路径有关。第一种只有一种风格。 它应该是什么样子: enter image description here

    发生的情况: enter image description here

    请参见此处的代码:

             <!doctype html>
               <html>
                 <head>
                 <meta charset="utf-8">
                   <title>SVG</title>
                   </head>
                   <body>
                   <h1>Testing SVG</h1>
                   <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.41 35.61" width="100" height="100"><defs><style>.cls-1{fill:#000100;}</style></defs><title>Gear Icon</title><path class="cls-1" d="M362.88,771.63l-4.12-1.23a13.38,13.38,0,0,0-.81-2l2.12-3.93a1,1,0,0,0-.18-1.22l-2.5-2.5a1,1,0,0,0-1.22-.18l-3.78,2a13.39,13.39,0,0,0-2.46-1.05l-1.26-4.24a1,1,0,0,0-1-.74h-3.53a1,1,0,0,0-1,.74l-1.26,4.23a13.38,13.38,0,0,0-2.47,1.06l-3.78-2a1,1,0,0,0-1.22.18l-2.5,2.5a1,1,0,0,0-.18,1.22l2.12,3.93a13.36,13.36,0,0,0-.81,2l-4.12,1.23a1,1,0,0,0-.74,1v3.53a1,1,0,0,0,.74,1l4.12,1.23a13.36,13.36,0,0,0,.81,2l-2.12,3.92a1,1,0,0,0,.18,1.22l2.5,2.5a1,1,0,0,0,1.22.18l3.77-2a13.38,13.38,0,0,0,2.48,1.06l1.26,4.22a1,1,0,0,0,1,.74h3.53a1,1,0,0,0,1-.74l1.26-4.22a13.38,13.38,0,0,0,2.48-1.06l3.77,2a1,1,0,0,0,1.22-.18l2.5-2.5a1,1,0,0,0,.18-1.22l-2.12-3.92a13.36,13.36,0,0,0,.81-2l4.12-1.23a1,1,0,0,0,.74-1v-3.53A1,1,0,0,0,362.88,771.63Zm-17,11.19a8.43,8.43,0,1,1,8.43-8.43A8.44,8.44,0,0,1,345.91,782.81Z" transform="translate(-328.2 -756.57)"/></svg>
    
                  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 427.51 667.71" width="100" height="100"><defs><style>.cls-1{fill:none;}.cls-2{fill:#777;}.cls-3{fill:#fff;}</style></defs><title>Door</title><path class="cls-1" d="M543.07,362H219l228.11,70.32c13.5,4.17,24.41,21.68,24.37,39.25L470.53,865h72.54A14.61,14.61,0,0,0,558,850.41V377A15,15,0,0,0,543.07,362Z" transform="translate(-160.49 -332)"/><path class="cls-2" d="M543.07,332H207a45.07,45.07,0,0,0-42.41,30,33,33,0,0,0-2.95,14.17l-1.16,502.79c0,17.57,10.87,35.19,24.37,39.35l260.9,80.55c13.5,4.17,24.48-6.9,24.52-24.46L470.47,895h72.61A44.64,44.64,0,0,0,588,850.41V377A45,45,0,0,0,543.07,332ZM371.59,723.08c-13.08,0-23.68-16.07-23.68-35.89s10.6-35.89,23.68-35.89,23.68,16.07,23.68,35.89S384.66,723.08,371.59,723.08ZM558,850.41A14.61,14.61,0,0,1,543.07,865H470.53l0.9-393.43c0-17.57-10.87-35.08-24.37-39.25L219,362H543.07A15,15,0,0,1,558,377V850.41Z" transform="translate(-160.49 -332)"/><ellipse class="cls-3" cx="211.1" cy="355.19" rx="23.68" ry="35.89"/></svg>
    
              </body>
            </html>

    B) 如果我再添加第三个带有颜色的SVG。所有以前的SVG也会更改其颜色。发生的情况: enter image description here 请参见此处的代码:

             <!doctype html>
               <html>
                 <head>
                 <meta charset="utf-8">
                   <title>SVG</title>
                   </head>
                   <body>
                   <h1>Testing SVG</h1>
                   <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.41 35.61" width="100" height="100"><defs><style>.cls-1{fill:#000100;}</style></defs><title>Gear Icon</title><path class="cls-1" d="M362.88,771.63l-4.12-1.23a13.38,13.38,0,0,0-.81-2l2.12-3.93a1,1,0,0,0-.18-1.22l-2.5-2.5a1,1,0,0,0-1.22-.18l-3.78,2a13.39,13.39,0,0,0-2.46-1.05l-1.26-4.24a1,1,0,0,0-1-.74h-3.53a1,1,0,0,0-1,.74l-1.26,4.23a13.38,13.38,0,0,0-2.47,1.06l-3.78-2a1,1,0,0,0-1.22.18l-2.5,2.5a1,1,0,0,0-.18,1.22l2.12,3.93a13.36,13.36,0,0,0-.81,2l-4.12,1.23a1,1,0,0,0-.74,1v3.53a1,1,0,0,0,.74,1l4.12,1.23a13.36,13.36,0,0,0,.81,2l-2.12,3.92a1,1,0,0,0,.18,1.22l2.5,2.5a1,1,0,0,0,1.22.18l3.77-2a13.38,13.38,0,0,0,2.48,1.06l1.26,4.22a1,1,0,0,0,1,.74h3.53a1,1,0,0,0,1-.74l1.26-4.22a13.38,13.38,0,0,0,2.48-1.06l3.77,2a1,1,0,0,0,1.22-.18l2.5-2.5a1,1,0,0,0,.18-1.22l-2.12-3.92a13.36,13.36,0,0,0,.81-2l4.12-1.23a1,1,0,0,0,.74-1v-3.53A1,1,0,0,0,362.88,771.63Zm-17,11.19a8.43,8.43,0,1,1,8.43-8.43A8.44,8.44,0,0,1,345.91,782.81Z" transform="translate(-328.2 -756.57)"/></svg>
    
                  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 427.51 667.71" width="100" height="100"><defs><style>.cls-1{fill:none;}.cls-2{fill:#777;}.cls-3{fill:#fff;}</style></defs><title>Door</title><path class="cls-1" d="M543.07,362H219l228.11,70.32c13.5,4.17,24.41,21.68,24.37,39.25L470.53,865h72.54A14.61,14.61,0,0,0,558,850.41V377A15,15,0,0,0,543.07,362Z" transform="translate(-160.49 -332)"/><path class="cls-2" d="M543.07,332H207a45.07,45.07,0,0,0-42.41,30,33,33,0,0,0-2.95,14.17l-1.16,502.79c0,17.57,10.87,35.19,24.37,39.35l260.9,80.55c13.5,4.17,24.48-6.9,24.52-24.46L470.47,895h72.61A44.64,44.64,0,0,0,588,850.41V377A45,45,0,0,0,543.07,332ZM371.59,723.08c-13.08,0-23.68-16.07-23.68-35.89s10.6-35.89,23.68-35.89,23.68,16.07,23.68,35.89S384.66,723.08,371.59,723.08ZM558,850.41A14.61,14.61,0,0,1,543.07,865H470.53l0.9-393.43c0-17.57-10.87-35.08-24.37-39.25L219,362H543.07A15,15,0,0,1,558,377V850.41Z" transform="translate(-160.49 -332)"/><ellipse class="cls-3" cx="211.1" cy="355.19" rx="23.68" ry="35.89"/></svg>
                  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.54 354.54" width="100" height="100"><defs><style>.cls-1{fill:#fecc02;}.cls-2{fill:#efa706;}.cls-3{fill:#fff;}.cls-4{fill:#0071bc;}</style></defs><title>Offer</title><path class="cls-1" d="M748.42,798.71L881.13,931.43a177.14,177.14,0,1,0-137.61,144.85L607.19,939.94Z" transform="translate(-528.88 -725.7)"/><rect class="cls-2" x="600.5" y="904.85" width="33.25" height="17.25" transform="translate(297.8 -894.52) rotate(45)"/><path class="cls-2" d="M881.13,931.43L748.42,798.71,607.19,939.94l136.34,136.34A177.43,177.43,0,0,0,881.13,931.43Z" transform="translate(-528.88 -725.7)"/><rect class="cls-1" x="656.6" y="827.79" width="116.48" height="39.34" transform="translate(-918.75 27.99) rotate(-45)"/><path class="cls-3" d="M630.35,881.25l-8.29,2.15,15.1,58.23,8.29-2.15q7.68-2.84,15.28-5.06l0.49,1.9c8.67,23.48,3.85,45.86,3.85,45.86l0.88,3.41,34-8.82-0.88-3.41s-15.09-17.22-18.92-42l-0.46-1.79c58.27-12.41,106.76-2,106.76-2l10.48-2.72L769.82,820.34l-10.48,2.72S706.39,869.47,630.35,881.25Z" transform="translate(-528.88 -725.7)"/><path class="cls-4" d="M789,853.11l9.68,37.31A19.27,19.27,0,1,0,789,853.11Z" transform="translate(-528.88 -725.7)"/><rect class="cls-4" x="601.65" y="896.86" width="15.19" height="41.86" transform="translate(-739.74 -543.4) rotate(-14.54)"/></svg>
    
              </body>
            </html>

    我在google上搜索了一些信息,这些信息可能与样式/路径有关。如有任何澄清,将不胜感激。

    1 回复  |  直到 6 年前
        1
  •  3
  •   allenski    6 年前

    如果查看每一段SVG代码,您将看到:

    <defs><style>.cls-1
    

    他们每个人都在重新定义类:。cls-1

    对于每个SVG,只需将类替换为每个SVG的唯一类,然后就可以正常工作了。