10

グラフィックデザインのバックグラウンドから来て、私は加法色の効果を作成するためにカンニングする方法を知っています。同じ基本的な解決策が、ここの別の投稿で提案されています。

上記の投稿は透過.pngファイルについて言及していますが、概念は同じです。私が作りたい基本的な効果は、ここに描かれているようなものです。

SVGでそれを実行して、スケーリングできるようにし、特定のトピックについて話しているときに（トピックが「緑」であるとしましょう）、グラフィックのその部分を拡大して、重複する領域を拡大できるようにしたいと思います。正しく表示されます。

これらの投稿はかなり近づいているようです：

しかし、上記のどれもSVGを扱っていないので、それを回転させましょう。

4

3 に答える 3

12

現在、これはSVG フィルターで実行できます。あなたの関心は色の混合にあるので、次のフィルタ プリミティブの調査に関心があるかもしれません: feBlend、feComposite、feColorMatrix、およびfeComponentTransfer。

簡単な方法 (Inkscape) を学びたい場合は、このブログ投稿を参照してください。また、 Inkscape の本、特にカスタム フィルターの使用方法を読むことをお勧めします。これは、基本的な効果の例と同様の結果を持つ feBlend を示す1 つのページです。

更新:これは、inkscape book から の関連する svg ファイルです。svg フィルター (およびフィルター入力、Gecko はサポートしBackgroundImageていないことに注意してください)をサポートするブラウザーでは、下の画像のようになります。BackgroundImageenable-backgroundfeBlendのバリエーション

于 2012-12-19T10:21:12.807 に答える
3

このバージョンは、真のクロスブラウザーではなかった以前のバージョンを置き換えます。さまざまな円に個別の形状は必要ないことに気付きました。フィルター内で元の形状を複製、再配置、および再色付けできます。

<svg x="0px" y="0px" width="600px" height="600px" viewbox="0 0 600 600">
    
    <defs>
    <filter id="B4" x="-150%" width="400%" y="-150%" height="400%">
      <feOffset in="SourceGraphic" result="pre-red" dx="-70" dy="-120"/>
      <feColorMatrix in="pre-red" type="matrix" result="red" values="0 0 0 0 1
                                                       0 0 0 0 0 
                                                       0 0 0 0 0 
                                                       0 0 0 1 0"/>

      <feOffset in="SourceGraphic" result="pre-blue" dx="70" dy="-120"/>
      <feColorMatrix in="pre-blue" type="matrix" result="blue" values="0 0 0 0 0
                                                       0 0 0 0 0 
                                                       0 0 0 0 1 
                                                       0 0 0 1 0"/> 
      <feBlend mode="screen" in="red" in2="blue" result="main"/>
      <feBlend mode="screen" in="main" in2="SourceGraphic"/>
    </filter>
    </defs>
    
       <circle filter="url(#B4)" cx="200" cy="250" r="100"  fill="#00FF00"  />
    
    </svg>

于 2012-12-21T18:53:23.220 に答える