CSSブレンドモードとSVGを使用して、製品画像の色を動的に変更します。

数日前、Codepen で @Kyle Wetton が書いた、CSS ブレンディング モードと SVG を使用してソファの色を変更する例を見ました。非常に興味深い事例です。これは、実際のビジネス シナリオでの応用を思い出させます。たとえば、美容アプリケーションにも同様のシナリオがあります。この効果を実現する方法についてさらに詳しく知りたいですか?もしそうなら、読み続けてください。

CSS ブレンドモードと SVG を使用してソファの色を変更する

次のデモは、Codepen で @Kyle Wetton が作成したエフェクトからのものです。

色を変更してみると、さまざまなソファの色が表示されます。

面白いと思いませんか？

実際、実際のシーンでも、美容アプリケーションなど、同様の効果がいくつかあります。

実施原理や効果を知りたい方は、ぜひ読み進めてください。

必要な基礎知識

上記の例の効果をうまく実装したい場合は、少しの基礎知識が必要です。たとえば、CSS 混合モード、SVG などです。

CSS ブレンド モードのさまざまなプロパティ値を使用すると、画像の効果を簡単に変更できます。

CSS 混合モードでは、他の多くの効果も実現できますが、ここでは詳しく説明しません。

さらに、写真を切り抜くスキルも必要です。しかし、フロントエンドではこれは問題にならないと思います。

ソファのスキンを変更する方法

次に、これを実践して、まずは@Kyle Wetton のケースを分析してみましょう。この例は非常に単純で、HTML には 3 つの部分があります。

• 非常に密集した SVG コードが山ほどあります。SVG を知らない学生にとっては、間違いなく恐怖感を覚えるでしょう (慌てないでくださいね)
• 写真があります
• ユーザーが色を選択できるコントロールがいくつかあります

この SVG コードを簡単に分析してみましょう。

<svg id="js-couch" class="couch__overlay" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="1000" height="394">
    <定義>
        <path d="M996.35 77.55q-1.85-1.95-8.65-3.75l-62.4-17.1q-9.3-2.75-12.15-2.5-1.8.15-2

要約する

以上が、CSS ブレンディング モードと SVG を使用して製品画像の色を動的に変更する方法についてご紹介しました。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!