2

アイコンの一部を再利用する必要がある SVG を使用してアイコン ソリューションを構築しています。<svg />私の HTML ドキュメントにはいくつかの異なる要素がインラインであり、この<use />要素は svg 要素間であっても形状 (四角形、パスなど) を再利用するのに完璧に機能します。

ただし、他の定義を再利用すること<radialGradient />はできません。グラデーションが<defs />同じ<svg />要素内の要素内で定義されている場合は期待どおりに機能しますが、グラデーションが別の<svg />要素で定義されている場合は機能しません。

疑似コード

<!-- Near the top of my BODY element -->
<!-- This is where I keep the SVG stuff I want to reuse -->
<svg id="for-reuse" style="display:none">
  <defs>
    <path id="marker" d="M63 127L49 93C44 80 52 69 63 69L64 69C75 69 83 80 78 93L64 127" />
    <radialGradient id="shadow">
      <stop offset="10%" stop-color="rgba(0,0,0,0.4)" />
      <stop offset="90%" stop-color="rgba(0,0,0,0)" />
    </radialGradient>
  </defs>
</svg>

<!-- Further down the html document -->
<svg viewBox="0 0 128 128" style="width:64px; height:64px" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- This use element works fine! -->
  <use xlink:href="#marker" style="fill:black" />

  <!-- But this fill attribute does not! -->
  <rect x="5" y="5" width="20" height="20" fill="url(#shadow)" />
</svg>

use他の要素から形状を作成できるのにsvg、このような属性値を作成できないのはなぜですか? 目に見える svg 要素内の要素にshadowグラデーションを移動すると、参照は完全に機能します。defs

これは、機能している場合と機能していない場合の両方を示す JSFiddle です: https://jsfiddle.net/7tfna0L8/2/

ソリューション

Robert Longsonは、私の再利用可能な svg の「リポジトリ」にstyleはdisplay:none. 私にとっては、これが正しい方法のように感じます。結局のところ、このリポジトリは決して表示されるべきではありません。問題は、ブラウザがおそらくスタイルをまったく解析しないことでこれを最適化することです。これにより、要素を参照できますが、スタイル は参照できません（私のグラデーションのように）

jsFiddle の作業: https://jsfiddle.net/atornblad/7tfna0L8/3/

4

1 に答える 1

4

あなたの遠勾配は、display:none のスタイルを持つ svg にあります。そのフラグメント内のすべての CSS が無効になるため、動作しません。display:none の代わりに width="0" height="0" を試してください。

于 2016-03-04T15:33:34.367 に答える