0

私はこれらのアイコンを持っており、ホバー時にドロップシャドウ（基本的には何か、何か）を手続き的に追加して、それらがそれほど派手に見えないようにします。

それらはSVGなので、理論的には次のようなものを追加できます。

<filter id="f1" x="0" y="0" width="200%" height="200%">
  <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
  <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
  <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>

そして、マウスオーバーに適用するためのJavaScriptの魔法。これにより、設計作業の時間を節約できる可能性があります。

問題は、svgがとして表示されること<a style='background-image:url(icon.svg)' />です。

SVG要素に入る方法はありますか？

4

4 に答える 4

1

いいえ、直接はできません。これが必要な場合の回避策は、htmlでインラインsvgを使用するか、<object>、<iframe>、または<embed>のいずれかでsvgファイルを参照することです。

ここでホバーにインラインsvgとフィルター効果を使用する例。svg部分は基本的に次のようになります。

<svg width="400" height="400" viewBox="-2 -2 36 32">
  <defs>
    <style>
      #stack polygon:hover { filter: url(#glow); }
    </style>
    <filter id="glow">
        <feMorphology radius="0.7"/>
        <feGaussianBlur stdDeviation="1"/>
        <feColorMatrix type="matrix"
         values="0 0 0 0   0
                 0 0 0 0.9 0
                 0 0 0 0.9 0
                 0 0 0 1   0"/>
    </filter>
  </defs>
  <g id="stack" class="icon" fill="#850508">
    <polygon points="0,20 16,24 32,20 32,24 16,28 0,24"/>
    <polygon points="0,12 16,16 32,12 32,16 16,20 0,16"/>
    <polygon points="0,4 16,0 32,4 32,8 16,12 0,8"/>
  </g>
</svg>
于 2012-09-24T08:06:25.843 に答える
0

jquery addclassを使用し、変更が加えられた別のsvgにリンクするだけの場合はどうなりますか？

HTMLコードを使用してsvg要素を作成することもでき（ファイルを右クリック->メモ帳で表示）、そこにコードがあります-必要なすべての調整を行うことができるオンラインコンバーターがあり、svgコードを入力できますjavascript

于 2012-09-17T20:32:54.340 に答える
0

SVGを画像として使用している場合、画像のDOMにアクセスして、JavaScriptを介して操作することはできません。

XMLHTTPRequestを使用してそれらをロードし、DOMParserオブジェクトを使用してインラインデータとしてメインドキュメントに挿入することもできますが、これにより、ブラウザが画像アクセスをロックダウンすることで保護しようとしているセキュリティの問題が発生します。つまり、画像が変更されたり、ページに任意のJavaScriptをロードしている可能性があります。

私にとって最も単純で安全に思えるのは、エディターを使用して画像ファイルを直接変更し、それらにフィルターを追加してから、変更された画像を使用する場合です。

于 2012-09-17T21:32:00.790 に答える
0

背景画像として表示する方法がわかりませんが、この例のようにdiv内にsvgファイルをロードできる場合は、インポーター（変更されたバージョン）を使用できます。 githubで設立された他のインポーターの数）ここにあります：http ：//www.dariomac.com/Document/Raphael-Utils 。また、ファイルからSVGを直接インポートするためのすべての手順を説明しているこのストーリーもご覧いただけます。

于 2012-09-18T00:27:19.297 に答える