2

10品ほどのメニューがあります。各アイテムには独自のアイコンがあります。このアイコンは SVG ファイルです。

例えば：

<li class="active">
    <a href="/home">
        <svg version="1.1" id="svg-menu-home"
             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
             x="0px" y="0px" width="31px" height="31px" viewBox="-8 -8 31 31"
             overflow="visible" enable-background="new -8 -8 31 31" xml:space="preserve">
            <mask maskUnits="userSpaceOnUse" x="0" y="0" width="15" height="15" id="maskTop">
                <polygon fill="#FFFFFF" points="12,6.036 2,6.036 2,14.036 6,14.036 6,9.036 8,9.036 8,14.036 12,14.036"/>
                <polygon fill="#FFFFFF" points="7,0.036 0,7.036 14,7.036"/>
            </mask>
            <rect mask="url(#maskTop)" fill="#939598" width="15" height="15"/>
        </svg>
        <span>Home</span>
    </a>
</li>

ユーザーがメニュー項目を操作すると、それにクラスなどを割り当てることができます (ホバー、選択、アクティブ)。

ソース全体をインラインにすることが、次のように CSS を使用して SVG を変更できる唯一の方法のようです。

<style>
    li.active svg polygon {
       fill: red;
    }
</style>

問題は：

  1. かなりの数の SVG ファイルがインラインにあると、コードが読めなくなります。
  2. SVG を別の場所で参照すると、SVG の保守が容易になりません。

IMG ( ) と同じようにファイルsrc<img src="x.jpg"/>を参照し、Javascript に依存するソリューションを回避したいと思います。

ただし、私が見たすべての方法では、SVG 要素の CSS スタイル設定が許可されていません (または JS が必要です)。

考え/回避策はありますか？

4

2 に答える 2

0

おそらく最も洗練されたソリューションではありませんが、それらをphpインクルードに整理することができます。

<?php include 'inc/svg-menu-home.svg.php'; ?>
于 2012-08-29T18:25:46.617 に答える
0

http://raphaeljs.com/を見るのは悪い方法ではないと思います。これを作成するのに役立ちましたhttp://screencast.com/t/rNr0Cbqkb (すべての領域は svg です)

于 2012-08-29T18:38:14.523 に答える