BinaryDevelop
  1. ホーム
  2. html

[解決済み] SVGを外部CSSでスタイルするには？

2022-07-19 02:21:07

質問

私は、各 SVG ファイル内ではなく、外部スタイル シートを介して色を変更したいいくつかの SVG グラフィックを持っています。私はグラフィックをインラインに置くのではなく、images フォルダに保存して、それらをポイントしています。

ツールチップが機能するようにこの方法で実装し、さらにそれぞれを <a> タグで囲み、リンクできるようにしました。 

<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>

そして、以下はSVGグラフィックのコードです。 

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
    <path d="M28.44......./>
</g>
</svg>

外部CSSファイル(main.css)に以下を記述しました。 

.socIcon g {fill:red;}

それでも、グラフィックには何の影響もありません。.socIcon g path {}と.socIcon path {}も試してみました。

何かが正しくありません。おそらく、私の実装は外部CSSの修正を許可していないか、または私が手順を見落としたのでしょうか？あなたの助けを本当に感謝します! 私は、外部スタイルシートを介して SVG グラフィックの色を変更する機能が必要なだけで、ツールチップとリンクの機能を失うことはできません。(私はツールチップなしで生きることができるかもしれませんが。) ありがとうございます!

どのように解決するのですか？

main.css ファイルは、SVG ファイルが HTML にインラインで含まれている場合にのみ、SVG のコンテンツに影響を及ぼします。

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction 

<html>
  <body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
      <path d="M28.44......."/>
    </g>
  </svg>
</html>

SVGをファイルで管理する場合、CSSはSVGファイルの内部で定義する必要があります。

スタイルタグを使えば可能です。

http://www.w3.org/TR/SVG/styling.html#StyleElementExample 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......./>
  </g>
</svg>

サーバーサイドのツールを使って、アクティブなスタイルに応じてstyleタグを更新することができます。 rubyではNokogiriで実現できます。SVGは単なるXMLです。だから、おそらくこれを達成することができる多くのXMLライブラリが利用可能です。

もしそれができなければ、PNGのように使うしかないでしょう。各スタイルのセットを作成し、そのスタイルをインラインで保存します。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します