我可以在页面中重复使用相同的SVG并应用不同的CSS吗？

时间：2014-08-01 10:51:11

标签： html css svg

我有一个我想在网页中使用的SVG文件。我希望图像多次出现，但要为每个图像应用不同的CSS样式。

这可能吗？

澄清

当我说“应用不同的CSS样式”时，我的意思是我要设置SVG内容的样式（笔触，颜色，半径等），而不仅仅是<img>或其他内容的宽度。

另外，我不认为“复制并粘贴SVG内容”是“重新使用”它。我想创建一个像logo.svg这样的文件，并从HTML中引用它。

4 个答案:

答案 0 :(得分：9)

不，目前不是

目前不支持从包含HTML文档中设置SVG内容（描边，填充等）的样式。

@RobertLongson非常友好地指出SVG Parameters spec，这可以提供部分解决方案。它没有在任何浏览器中实现，但可以与Javascript垫片一起使用。但是，当我通过电子邮件向SVG工作组发送有关它的问题时，我被告知：

  

SVG参数文档目前已过期。计划在   时刻是将它与CSS Custom Properties和var（）集成;该   spec将成为定义自定义属性的另一种方法。

和

  

SVG＆lt; img＆gt; s实际上完全在一个单独的文件中;它＆＃39; S   与＆lt; iframe＆gt;基本相同，只是更严格地锁定。我们   不允许跨文档边界直接选择a   安全性，理智性和性能原因的结合。

     

也就是说，参数规范定义方法似乎是合理的   从参考环境中获取值，因此您可以设置   ＆lt; img＆gt;上的属性本身，它将转移到   在文档的请求中包含文档。

不符合规范的黑客：use标记

为了记录，以下似乎完成了我的既定目标（从CSS-Tricks借来的技术），但@RobertLongson让我知道它只适用于Firefox（我认为我使用的是版本31），因为Firefox是不符合规范。

<!DOCTYPE html>
<html>
  <head>
    <title>SVG Reuse Demo</title>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html" />
    <style type="text/css">
      .circle   .uno { stroke: orange; stroke-width: 5px; }
      .circle-1 .uno { fill: blue; }
      .circle-2 .uno { fill: red; }
      .circle-3 .uno { fill: green; }
    </style>
  </head>
  <body>
    <!-- Single definition of SVG -->
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      <symbol id="disc" viewbox="0 0 100 100">
        <circle class="uno" cx="50" cy="50" r="40">
      </symbol>
    </svg>
    <!-- Re-use; each is styled differently (see above) -->
    <svg class="circle circle-1">
      <use xlink:href="#disc">
    </svg>
    <svg class="circle circle-2">
      <use xlink:href="#disc">
    </svg>
    <svg class="circle circle-3">
      <use xlink:href="#disc">
    </svg>
  </body>
</html>

即使它是标准的，这种技术也不太理想;理想的解决方案是允许在外部文件中使用SVG定义的，例如circles.svg。

这是因为：

  1. 将它粘贴到HTML中是很杂乱的（我的实际用例可能是300行的SVG）
  2. 如果它是一个单独的文件，我可以在其他HTML文档中重复使用
  3. 我可以使用特定于SVG的语法高亮显示来编辑它
  4. 可以从HTML文档中单独请求和缓存
  5. ...基本上所有其他原因我们通常将CSS和图像放在单独的文件中而不是HTML中的内联。 ：）

答案 1 :(得分：3)

是的，绝对！

如果每次出现都是唯一的，只需将id属性应用于svg，然后引用它及其子ID，前缀为任何选择器，例如

<svg id='myimage ... />

然后在你的css中：

#myimage line{...}

例如，将样式应用于line svg中的myimage元素。

我还建议您查看MDN article on CSS selectors

答案 2 :(得分：3)

是的，可以使用SVG注入轻松完成，并且它应该在所有支持SVG的浏览器上都可以工作。

使用SVGInject，您的HTML可能如下所示：

<html>
<head>
  <script src="svg-inject.min.js"></script>
  <style>
    .redImage {
      /* Your CSS for the red image here */
    }

    .greenImage {
      /* Your CSS for the green image here */
    }
  <style>
</head>
<body>
  <img class="redImage" src="image.svg" onload="SVGInject(this)" />
  <img class="greenImage" src="image.svg" onload="SVGInject(this)" />
</body>
</html>

onload="SVGInject(this)"在加载SVG之后触发注入，并用来自指定SVG文件的SVG标记替换<img>元素。

答案 3 :(得分：-2)

<强> Demo

HTML 

<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174" xml:space="preserve" class="logo">
    <path class="kiwi" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
  c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
  c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
  c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
  c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
  c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
  c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
  c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
  c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
  c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
  c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
  c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
  c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
  c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
  z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
  C434.693,207.929,439.613,203.01,445.731,203.01z" />
</svg>
<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 65.326 612 502.174" enable-background="new 0 65.326 612 502.174" xml:space="preserve" class="logo">
    <path class="kiwi" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
  c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
  c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
  c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
  c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
  c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
  c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
  c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
  c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
  c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
  c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
  c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
  c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
  c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
  z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
  C434.693,207.929,439.613,203.01,445.731,203.01z" />
</svg>

CSS 

#Layer_1 {
  width: 200px;
}
#Layer_2 {
  width: 100px;
}
body {
  padding: 20px;
}

如果您不想多次使用svg的整个值，可以这样使用。

<强> Demo

HTML 

<img class="papa" src="http://s.cdpn.io/3/kiwi.svg">   
<img class="mama"  src="http://s.cdpn.io/3/kiwi.svg">   
<img class="baby"  src="http://s.cdpn.io/3/kiwi.svg">

CSS 

.papa {
  width: 250px;
}

.mama {
  width: 100px; 
}

.baby {
  width: 50px; 
}

来源：http://css-tricks.com/using-svg/

相关问题
最新问题