SVGでリアルなガラス効果を発揮します

私はSVGが大好きです。確かに、コードは最初は密で困難に見えることがありますが、それを知ると結果の美しさがわかります。ボーナスは、これらの結果がコードにあるため、CMSに接続できることです。デザイナーは、サイト上のすべての記事や製品の効果を再現する必要がないことを簡単に休めることができます。

今日は、このガラスのテキスト効果をどのように思いついたのかをお見せしたいと思います。

ステップ0：忍耐と空間

SVGは、特にあなたがそれを学び始めたばかりのときに、多くのことを引き受けることができます（そして、もしあなたがいるなら、クリスの本は始めるのに良い場所です）。それは実質的にまったく新しい言語であり、特にデザインのチョップを欠いている人にとっては、知っておくべき多くの新しいテクニックと考慮事項があります。ただし、HTMLと同様に、SVGを把握しやすくするために手を伸ばすことができる少数のツールがあることがわかります。

また、自分にスペースを与えてください。文字通り。 SVGコードは密集しているため、2つまたは3つの新しい行を使用して物事をスペースアウトするのが好きです。これにより、コードが読みやすくなり、視覚的な注意散漫が少なくて異なるピースがどのように分離されているかを確認できます。ああ、コメントを使用して、ドキュメントのどこにいるかをマークします。それはあなたの考えを整理し、あなたの発見を文書化するのに役立ちます。

このガラス効果を学習するプロセスで、私たちがカバーするものを私たちが行っているものを固めるのを助ける方法として、私たちがカバーする各ステップでデモを作成しました。

わかりました、今、私たちは精神的に準備されているので、それの肉に入りましょう！

ステップ1：基本的な画像を所定の位置に取得します

まず最初に：ガラス効果の背景として画像が必要です。ここには、を追加することに似ています。 SVG要素のViewbox属性と要素の寸法が同じであることがわかります。これにより、がリンクしている実際の画像とまったく同じサイズになることが保証されます。

それは注意すべき重要な区別です：私たちは画像にリンクしています。 SVGファイル自体はラスターイメージを描画しませんが、SVGコードの画像を参照して、資産が指し示す場所にあることを確認できます。以前にAdobe Indesignを使用していた場合、レイアウト内の画像資産にリンクすることによく似ています。画像はInDesignレイアウトにありますが、資産自体は実際にはどこかに住んでいます。

ステップ2：画像を歪めます

これまでのところ簡単ですが、挿入したばかりの画像にフィルターを追加するため、これは物事が複雑になる場所です。このフィルターは画像を歪めます。最後のステップのデモとこのステップのデモの違いをよく見ると、画像内のオブジェクトのエッジが少し粗くて波状であることがわかります。それが職場のフィルターです！

最初に、フィルターを保持するために別の

最初のフィルター（#displacement）は、画像を歪めます。 Sara Soueidanがこの投稿でできるよりもはるかに優れたSara Soueidanによって説明されているFeturbulenceとFedisPlacementMapを使用します。また、Beau Jacksonは、クラウド効果を発揮するために使用する方法を示す素敵な作品を書きました。言うまでもなく、これらの2つのフィルターは一緒に行く傾向があり、何かが「Wobbly」に見える必要があるときに考えたいです。

フィルター容器を所定の位置に配置すると、、Magicにフィルター属性を使用して、そのフィルターを画像に適用するだけです！

 <svg>

  
  
  
  
  <filter>
    <feturvulence type="乱流" basefrequency="0.05" numoctaves="2" result="乱流"></feturvulence>
    <fedisplacementmap in2="乱流" in="sourcegraphic" xchannelsector="r" ychannelsector="g"></fedisplacementmap>
  </filter>

  

</svg> 

ステップ3：テキストをクリップします

ただし、画像全体を歪めたくありません。歪んだの形状を、いくつかのテキストの形にクリップします。これは基本的に、ガラスを「介して」見られる写真の一部になります。

これを行うには、に要素を追加し、IDを与える必要があります。 のクリップパスでこのIDを呼び出すと、その形状がの形状に制限されます。素晴らしい！

ステップ4：完全な画像を明らかにします

わかりました、だから私たちは歪んだをにクリップしたのはブエノですが、今では画像の残りの部分がなくなっています。ブエノはありません。

同じのコピーを追加することでこれに反することができますが、既存のの前にクリップパスまたはフィルター属性を使用しないでください。これは、私が物事をきちんと保つためにいくつかの素晴らしいコメントを追加するのが好きな場所です。このアイデアは、これまでのところ、透明な層を配置するようなものです。

私は知っている、私は知っている、これはあまりきれいではなく、私たちは自分自身を繰り返しています。理想的には、フィルターを要素にまっすぐに設定し、in = "backgroundimageプロパティを使用して、fedisplacementmapに" backgroundimageプロパティを使用して、追加の要素を必要とせずにテキストの背後にあるものをワープします。残念ながら、これにはブラウザのサポートが不十分なので、複数の画像を使用します。

 <svg>

  

  
   
          
  
  

</svg> 

ステップ5：テキストを配置します…もう一度

次に、最後のステップで画像のために行ったのと同じように、テキストを複製します。残念ながら、テキストはクリップパスにあるため、レンダリングに利用できません。このようなコンテンツを複製するのはこれが最後です。私は約束します！

今、私たちはその上に黒いテキストがある通常の画像のように見えるものを持っている必要があります。すでに作成したの歪みフィルターがガラスを「介して」見ることができるものである場合、新しいはガラス自体になります。

 <svg>

  

  
  <clippath>
     Kyoto 
  </clippath>
        
  
   Kyoto 



</svg> 

ステップ6：テキストの暗い端を作成します

これは、少なくとも私にとっては、物事がエキサイティングになり始めるところです！ ？

テキスト要素に沿って暗いエッジを作成したいと考えています。テキスト要素は、明るいエッジとペアになったときに（次に見ています）、画像に対するテキストの外観に深さを追加します。

の新しいフィルターが必要なので、フィルターのSVG要素にそれを作成し、ガラス効果を実現するために4インチを付けましょう。

Feoffsetは、以前の原始（大腿骨）のすべての「ピクセル」をxまたはy軸全体に移動するために使用されます。値dx = "5"およびdy = "5"は、それぞれx軸とy軸に「ピクセル」を動かします。数が高いほど、さらに移動します。 dxに負の数を入れて、「ピクセル」が左に移動します。ネガティブなdyと彼らは上に移動します！繰り返しますが、それはあなたが彼らと遊ぶときにあなたが学び始めるようなものです。

私が「ピクセル」の周りに引用している理由は、CSSで期待されるような画面ピクセルではないためです。むしろ、親

Fefloodは素晴らしいです。画面を色で埋めたい場合は、これが必要な原始です！私たちがそれを適用したとき、なぜ私たちのテキストを今読めない理由を疑問に思うかもしれません。それは、作成された最後のフィルタープリミティブの結果しか見ることができないからです。以前のプリミティブのそれぞれの結果は、要素に関連していました。 Fefloodの結果は、その名前のようなものです。色の洪水です。以前に何をしたかわからず、気にしません。単に領域を色で満たすだけです。

これは、一部の人々がSVGに不満を感じ始める場所です。あなたがそれを見ることができないとき、何かに取り組むのは難しいです！私を信じてください、あなたがよりSVGで作業するので、あなたはこれに慣れるでしょう。実際、次のいくつかのステップでは、これに頼って、すべてがまだ整っていると信頼する必要があります。

fecompositeは、私たちのためにこの問題を解決する予定です。それは何をしますか？ MDNはそれを次のように説明しています。

SVGフィルターPrimitiveは、Porter-Duff Compositing操作のいずれかを使用して、画像空間で2つの入力画像の組み合わせを実行します。

私にとってそれはジバ・ジャバです。 IN2の色/アルファでINのアルファ層に影響を与えると思います。

これを設置すると、テキストが綴られているのを再び見ることができます。使用した色はわずかに透明であるため、歪んだ「ガラス」効果が通過することさえあります。素晴らしい！

 <svg>

  
    
  
  
    <feconvolvematrix order="3,3" kernelmatrix="1 0 0 
      0 1 0
      0 0 1 " in=" dark_edge_01 " result=" dark_edge_02 "></feconvolvematrix>
    <feoffset dx="5" dy="5" in="dark_edge_02" result="dark_edge_03"></feoffset>
    <feflood flood-color="rgba（0,0,0、.5）" result="dark_edge_04"></feflood>
    <fecomposite in="dark_edge_04" in2="dark_edge_03" operator="in" result="dark_edge"></fecomposite>
    
  

  

</svg> 

ステップ7：ライトエッジをしましょう

これは本質的に私たちが文字通りやったことと同じですが、負のDX/DY値を使用して形状を左にシフトします。また、今回は少し白い色になりました。私たちは素晴らしい深さの効果を目指しています。

私たちは再び、私たちが見ることができるものがフィルタープリミティブからの最新の結果である状態にありますが、私たちの暗いエッジは見えません！ fecompositeは、明るい端で色付けされた暗い縁のアルファを望んでいないので、それらをまとめるために使用したいものではありません...両方を見たいです！それは私たちを…

 <svg>
  <filter>

    

      
      <feconvolvematrix order="3,3" kernelmatrix="1 0 0 
        0 1 0
        0 0 1 " in=" light_edge_01 " result=" light_edge_02 "></feconvolvematrix>
      <feoffset dx="-2" dy="-2" in="light_edge_02" result="light_edge_03"></feoffset>
      <feflood flood-color="rgba（255,255,255、.5）" result="light_edge_04"></feflood>
      <fecomposite in="light_edge_04" in2="light_edge_03" operator="in" result="light_edge"></fecomposite>

    
  
  </filter>
</svg> 

ステップ8：エッジを結合します

女性！それはヒーローです。それにより、私たちは任意の数の原始的な結果を取り、それらをマージし、新しい画像を作成することができます。ウーフー、私たちは今、暗い縁と明るいエッジの両方を一緒に見ることができます！

ただし、テキスト全体を埋めるのではなく、エッジにすることを望んでいるため、元のが取り上げるスペースを削除する必要があります。次に必要なのは、元のSourceGraphicを切り刻むためのもう1つのフェクポジットです。大腿眼科を使用して、エッジの文字を肥やしたため、女性の結果から元の文字の形を切り刻むことができます。

 <svg>
  <filter>

    

    <femerge result="edges">
      <femergenode in="dark_edge"></femergenode>
      <femergenode in="light_edge"></femergenode>
    </femerge>
    <fecomposite in="edges" in2="sourcegraphic" operator="out" result="edges_complete"></fecomposite>

  </filter>
</svg> 

今、私たちはガラスのように見え始めており、1枚だけが欠けています。

ステップ9：はい、ベベル

かなり良い3Dに見えるガラス効果があります。しかし、文字は平らに見えます。もう1つの効果を追加して、それらをより丸く見せてみましょう。

これを達成するために、bevelled効果を作成します。

まず、FegaussianBlurを使用します。これにより、既存のフィルターがわずかに曖昧になります。このぼやけた結果を基礎として使用して、いくつかのfesspularlightingを追加します。いつものように、ここで数字で遊んで、どのような効果を得ることができるかを見てください！変更したい主なものは、照明色の属性です。ここで使用している画像はわずかに暗いので、明るい照明色を使用しています。あなたの画像が非常に明るい場合、これにより文字が読みにくくなりますので、その場合は暗い照明色を使用する可能性があります。

 <svg>
  <filter>
  
    

    <fegaussianblur stddeviation="5" result="bevel_blur"></fegaussianblur>
    <fespecularlighting result="bevel_lighting" in="bevel_blur" specularconstant="2.4" specularexponent="13" lighting-color="rgba（60,60,60、.4）">
      <fedistantlight azimuth="25" elevation="40"></fedistantlight>
    </fespecularlighting>
    <fecomposite in="bevel_lighting" in2="sourcegraphic" operator="in" result="bevel_complete"></fecomposite>

  </filter>
</svg> 

ステップ10：今すぐ一緒に！

最後に、すべてのピースが準備ができているので、最後の女性を1つ行い、完成した効果を得るためにすべてを整えます！

 <svg>
  <filter>

    

    <femerge result="complete">
      <femergenode in="edges_complete"></femergenode>
      <femergenode in="bevel_complete"></femergenode>
    </femerge>
  </filter>
</svg>

ここにすべてが一緒になり、うまく間隔を空けてコメントしました：

 
<svg viewbox="0 0 1890 1260">
        
  
   
    
  
  
  <clippath>
     Kyoto 
  </clippath>
    
  
   Kyoto 
    
</svg>


<svg>
  <filter>
    <feturvulence type="乱流" basefrequency="0.05" numoctaves="2" result="乱流"></feturvulence>
    <fedisplacementmap in2="乱流" in="sourcegraphic" xchannelsector="r" ychannelsector="g"></fedisplacementmap>
  </filter>
    
  <filter>
            
    
    
    <feoffset dx="5" dy="5" in="dark_edge_01" result="dark_edge_03"></feoffset>
    <feflood flood-color="rgba（0,0,0、.5）" result="dark_edge_04"></feflood>
    <fecomposite in="dark_edge_04" in2="dark_edge_03" operator="in" result="dark_edge"></fecomposite>     
            
    
    
    <feoffset dx="-2" dy="-2" in="light_edge_01" result="light_edge_03"></feoffset>
    <feflood flood-color="rgba（255,255,255、.5）" result="light_edge_04"></feflood>
    <fecomposite in="light_edge_04" in2="light_edge_03" operator="in" result="light_edge"></fecomposite>
          
    
    <femerge result="edges">
      <femergenode in="dark_edge"></femergenode>
      <femergenode in="light_edge"></femergenode>
    </femerge>
    <fecomposite in="edges" in2="sourcegraphic" operator="out" result="edges_complete"></fecomposite>
          
    
    <fegaussianblur stddeviation="5" result="bevel_blur"></fegaussianblur>
    <fespecularlighting result="bevel_lighting" in="bevel_blur" specularconstant="2.4" specularexponent="13" lighting-color="rgba（60,60,60、.4）">
      <fedistantlight azimuth="25" elevation="40"></fedistantlight>
    </fespecularlighting>
    <fecomposite in="bevel_lighting" in2="sourcegraphic" operator="in" result="bevel_complete"></fecomposite>

    
    <femerge result="complete">
              <femergenode in="edges_complete"></femergenode>
              <femergenode in="bevel_complete"></femergenode>
    </femerge>

  </filter>
</svg> 

以上がSVGでリアルなガラス効果を発揮しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。