7

ゴール

特定の形状の上に波の照明をレンダリングする SVG フィルターを作成しようとしています。その形状の内側に波を適用したいのですが、その形状の外側に目に見える効果を加えたくないのです。私の知る限り、波に使用されるハイト マップとatopコンポジションのターゲット ドメインの両方に同じ画像ソースを使用することはできません。<feImage>そのため、要素を使用して、別のグラデーションで塗りつぶされたオブジェクトから高さマップを取得できると考えました。しかし、これまでのところ、そのオブジェクトをフィルター効果領域内に表示することに成功していません。

最初の試み

私がこれまでに持っているコード:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" width="512" height="512"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="waveFill" r="5%" spreadMethod="reflect">
      <stop offset="0%" stop-opacity="1.00"/>
      <stop offset="20%" stop-opacity="0.90"/>
      <stop offset="40%" stop-opacity="0.65"/>
      <stop offset="60%" stop-opacity="0.35"/>
      <stop offset="80%" stop-opacity="0.10"/>
      <stop offset="100%" stop-opacity="0.00"/>
    </radialGradient>
    <rect id="waveImg" x="-210" y="-105" width="420" height="210"
          stroke="none" fill="url(#waveFill)"/>
    <filter id="waveFilter">
      <feImage xlink:href="#waveImg" result="waves"/>
      <!-- feSpecularLighting and so on will be added later on -->
      <feComposite operator="atop" in="waves" in2="SourceImage"/>
    </filter>
  </defs>
  <g transform="translate(256 256)">
    <!-- use xlink:href="#waveImg"/ works -->
    <ellipse rx="200" ry="100" fill="#0000ff" stroke="none"
             style="filter:url(#waveFilter)"/>
  </g>
</svg>

関連文書

状態のドキュメント<feImage>:

「xlink:href」</a> が JPEG、PNG、SVG ファイルなどのスタンドアロンの画像リソースを参照する場合、画像リソースは「image」</a> 要素の動作に従ってレンダリングされます。それ以外の場合、参照されたリソースは「use」</a> 要素の動作に従ってレンダリングされます。いずれの場合も、現在のユーザー座標系は、 'filter'</a> 要素の属性'primitiveUnits'</a> の値に依存します。

2 回目の試行

use代わりに、image私には大丈夫に見えますが、この場合、長方形の領域がどのように定義されているかわかりません。のドキュメントuseは、そのような場合 (参照された要素は要素でも要素でもないsymbol)svgを示しているようですがwidth、heightプロパティは無関係ですが、それは長方形の領域をどのように説明していますか? また、プリミティブ単位の変更が役立つのではないかと考えました。または、 内の画像をボックス化しsymbolます。したがって、私の2回目の試みは次のとおりでした。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" width="512" height="512"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="waveFill" r="5%" spreadMethod="reflect">
      <stop offset="0%" stop-opacity="1.00"/>
      <stop offset="20%" stop-opacity="0.90"/>
      <stop offset="40%" stop-opacity="0.65"/>
      <stop offset="60%" stop-opacity="0.35"/>
      <stop offset="80%" stop-opacity="0.10"/>
      <stop offset="100%" stop-opacity="0.00"/>
    </radialGradient>
    <symbol viewBox="0 0 100 100" id="waveImg" preserveAspectRatio="none">
      <rect width="100" height="100" stroke="none" fill="url(#waveFill)"/>
    </symbol>
    <filter id="waveFilter" primitiveUnits="objectBoundingBox">
      <feImage xlink:href="#waveImg" x="0" y="0" width="100%" height="100%"
               preserveAspectRatio="none" result="waves"/>
      <!-- feSpecularLighting and so on will be added later on -->
      <feComposite operator="atop" in="waves" in2="SourceImage"/>
    </filter>
  </defs>
  <g transform="translate(256 256)">
    <!-- use xlink:href="#waveImg"/ works -->
    <ellipse rx="200" ry="100" fill="#0000ff" stroke="none"
             style="filter:url(#waveFilter)"/>
    <ellipse rx="200" ry="100" fill="none" stroke="#ff0000"/>
  </g>
</svg>

まだ画像は表示されません。私は何を間違っていますか？

コアな質問

SourceGraphicSVG ファイルのフラグメントをフィルターのとして使用せずに、ライティングのバンプ マップとして使用するにはどうすればよいですか?

ラスタライザー

このイメージは Web 展開用ではありませんが、ローカルでラスター化されます。したがって、ブラウザの互換性はそれほど問題ではありません。Inkscape または rsvg-convert のいずれかで正しくレンダリングされれば、それで十分です。

4

1 に答える 1