带有非内联svg的HTML

时间:2015-05-07 19:00:28

标签: css svg

我是svg的新手。我看过w3schools,MDN,css-tricks和一堆youtube tuts。我对于使用svg使用css感到困惑。我是否必须将svg直接放入html中?我想导入svg并且仍然有css工作。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="test.css"> 

        <!-- css moved to external file test.css            
        <style>
            #down-glyph {
                fill: red;
            }
            #down-glyph:hover {
                fill: green;
            }
        </style>
        -->     
    </head>
    <body>

        <!-- svg copied from 'downbracket.svg'  this works -->
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 65'>
            <polygon id='down-glyph' fill="#e8e899" points=" 0.0,12.419 64.362,65.306 128.732,12.419 108.151,0.944 64.362,35.347 20.573,0.944"/>
        </svg>

        <!-- svg loads but styling not applied this way
        <object id='scroll-down' class='scroll-button' type="image/svg+xml" data="downbracket.svg">alternate here</object>
        -->

     </body>
 </html>

2 个答案:

答案 0 :(得分:1)

这是您测试的一个方面(请注意左上角下拉框中使用svg.js 0.x (latest)扩展名):http://jsfiddle.net/Vac2Q/5531/

HTML:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 65'>
  <polygon id='down-glyph' fill="#e8e899" points=" 0.0,12.419 64.362,65.306 128.732,12.419 108.151,0.944 64.362,35.347 20.573,0.944" />
</svg>

CSS:

#down-glyph {
    fill: red;
}
#down-glyph:hover {
   fill: green;
}

是的,您可以在HTML中内联它,但您也可以将其移动到单独的文件中。有几种方法可以插入SVG,你的方式适用于非动态SVG。如果SVG是动态的(交互式),请学习使用<object>标记。如果SVG是静态的(没有交互),您也可以使用<img src="image.svg" />标签或CSS来导入SVG,如下所示:

#myelement {
    background-image: url(image.svg);
}

答案 1 :(得分:0)

  

我很担心与svg一起使用css。我是否必须将svg直接放入html?

CSS不跨文档边界工作。因此,如果您的HTML中有CSS(或由HTML加载),那么CSS将不适用于外部文件中包含的任何SVG(无论是通过<img><object>等)。

有一种解决方法。您可以使用脚本加载这些外部文件,并在运行时将它们内嵌到HTML中。