Q

爲什麼不是CSS風格化SVG？

2014-03-01 77 views 2 likes

2

我有一個SVG圖像嵌入在一個對象標籤中，我試圖用CSS來設計風格。 SVG正在頁面上顯示，但CSS中的更改什麼也不做。我想我可能有一個問題，我如何鏈接CSS與HTML。我不想在HTML內部鏈接CSS。爲什麼SVG不會繼承CSS樣式？爲什麼不是CSS風格化SVG？

HTML

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css" /> 
    <?xml-stylesheet type="text/css" href="stylesheet_svg.css" ?> 
    <title>Test</title> 
</head> 
<body> 
    <div id="topheading"> 
     <div id="logobox"> 
      <object class="logo" type="image/svg+xml" data="Wolf_template_empty.svg"><img id="logocenter" data="Wolf_template_empty.gif" /></object> 
     </div> 
     <h1 id="ip"></h1> 
    </div> 
</body>

CSS

.logo { 
stroke: #006600; 
}

2014-03-01 user3304179

A

回答

0

筆劃不是<object>標記的有效CSS屬性。如果你想讓你的SVG文件引用外部CSS，那麼你必須在SVG文件中添加一個指向外部CSS文件的引用來指定描邊。您不提供SVG源代碼，所以我不知道您是否嘗試過這樣做。

2014-03-01 03:13:19

+0

我以爲我可以直接在HTML中的對象標籤中將SVG圖像引用到CSS文件中。你能給我看一個SVG文件的例子嗎？ – user3304179

+0

請參閱：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes –

+0

我花了一段時間才明白你在說什麼，但我看着我用作參考的網站我終於明白了。我不知道我必須從圖片本身中引用。我終於搞定了。謝謝。 – user3304179

2

出於同樣的原因CSS樣式不滲透到iframe秒。也就是說，它處於不同的上下文環境中，如果您希望頁面中的樣式影響它，則必須將SVG直接嵌入頁面中。您也可以將CSS添加到SVG中，在那裏它會影響SVG（但不是HTML）。

2014-03-01 02:15:52 icktoofay

+0

以下網站說可以做，我只是不知道我在做什麼錯誤：http://css-tricks.com/using-svg/，http://www.hongkiat.com/博客/ scalable-vector-graphic-css-styling/ – user3304179

+0

@ user3304179從那個文檔「與和背景圖像的問題......你是不是可以用CSS來控制SVG的內部有以下兩種方式。「 –

+0

來自該文檔：「如果」內聯「SVG只是不是你的果醬（記住它有一些合法的缺點，如難以緩存），**你可以鏈接到一個SVG文件，並保留影響其零件的能力CSS使用