外部にリンクされた SVG を CSS でスタイル設定するには?

外部 CSS を使用して SVG をスタイルする方法

SVG グラフィックを外部に保存し、リンク経由でアクセスする場合、外部 CSS を通じてスタイルを設定すると、チャレンジ。この場合、CSS ファイルは SVG のコンテンツを直接変更できません。

外部 CSS の制限

外部 CSS ファイル「main.css」は、 SVG が HTML にインラインで含まれている場合、SVG のコンテンツ。これは、次のコード スニペット:

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

は「main.css」の CSS の影響を受けないことを意味します。

SVG 内のスタイルの適用

外部に保存された SVG のスタイルを設定するには、SVG ファイル自体内で CSS を定義する必要があります。スタイル タグを使用できます:

<!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>

または、Ruby の Nokogiri などのサーバー側ツールを使用して、アクティブなスタイルに基づいてスタイル タグを更新することもできます。

フォールバック オプション

上記の解決策のいずれも実行できない場合は、インラインの使用に頼ることができます。 SVG、または異なるスタイルで個別の PNG を作成します。

以上が外部にリンクされた SVG を CSS でスタイル設定するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。