2

1) PNG フォールバックを使用して SVG を埋め込み、2) 外部スタイルシートで CSS を使用して SVG の特定の部分の色をスタイル設定し、3) jQuery を使用しない方法が必要です。

背景:
職場では、複数の Web サイトにまたがるサーバー上の同じリソースにリンクしているため、この方法でリソースを更新した場合、20 のサイトで個別に更新する必要はありません。外部スタイルシートを使用して、リソース (この場合は SVG) を配置する Web サイトのテーマを模倣できるようにします。

私の解決策:
私はもともと jQuery でそれを行いましたが、上司から、私たちが持っている古いサイトのいくつかに jQuery をロードする必要がないため、単純な JS ソリューションが必要であると言われました (これはばかげているように聞こえますが、私は上司ではありません）。

使用した私の元のソリューション：

  1. SVG フォールバック用の http://www.noupe.com/tutorial/svg-clickable-71346.html (ソリューション 3a.)、および

  2. CSS(jQuery SVG画像置換)を使用してSVG画像の色を変更するには? SVGを埋め込むため。 

    <a href="link-to-another-page" >  
<img class="svg" src="awesome.svg" alt="An awesome SVG" width="186" height="235" onerror="this.removeAttribute('onerror'); this.src='not-as-awesome.png'" /> 
</a>  
<!--followed by the jQuery code in item #2-->

うまく機能しますが、jQuery を使用します。私は JS の初心者なので、jQuery コードを通常の JS に変換しようとすると、混乱しすぎてしまいます。

どんな提案も役に立ちますが、私が言ったように、これには次のことが必要です。

  1. クリック可能にする
  2. jQueryを使用しない
  3. 外部スタイルシートで SVG スタイルを許可する
4

2 に答える 2

2

SVGeezy はまさにあなたが探しているものです:

https://github.com/benhowdle89/svgeezy

これは、純粋な JavaScript でビットマップ フォールバックを処理する、ほんの数行の js ファイルです。

于 2012-12-09T22:17:35.813 に答える
2

タグを完全に削除し、<img/>代わりに背景画像付きのタグを使用することをお勧めします

たとえば、代わりにリンクを使用できます。

<style>

.logo {
    display: inline-block;
    width: 400px;
    height: 200px;
    background-color: #some-color;
    background-image: url('url.png');
    background-image: url('url.svg'); //browsers that not support svg should ignore it completely and .png background would be applied and modern browsers would reassign background image
}

</style>

<a class="logo" href=""></a>

別の方法は、html5 では問題ないため、svg を直接埋め込むことです。

<style>

​svg {
    background: #f7f7f7;
    border: 1px solid #efefef;
}
​.logo {
    display:inline-block;
    width: 400px;
    height: 200px;
    background: yellow url('some iamge url here');
}​

</style>

<a class="logo" href="">
    <svg xmlns="http://www.w3.org/2000/svg"
        version="1.1" baseProfile="full"
        width="100%" height="100%" viewBox="0 0 700 400">
        <rect x="100" y="100" width="500" height="200" fill="white" stroke="black" stroke-width="20px"/>
    </svg>
</a>​

良いことは、html5 にはdisplay: block to link 要素の適用に問題がないことです。inline -blockを使用するべきではないと思います。また、ロゴをリンク タグでラップしたかったので、ie7 で問題がなくても完璧な解決策になるはずです。 display: block を他のインライン要素と同様に link 要素に適用します。ブラウザのサポートが優れているため、最初の方法を好みます。インラインSVGとSVGを背景画像として埋め込むことを確認できます

PS スタイルのタグは html 内にはありませんが、誰もがそれを知っていると思います:) インライン svg の使用方法がわからない場合は、inkscape を開くだけで xml エディターが表示され、svg をコピーして html 内に貼り付けることができます。

于 2012-12-09T21:22:56.590 に答える