###解決したいこと
現在、SVGのclip-pathで画像を表示しているのですが、PCとスマホでclippathのpointや表示領域が違うため、
CSSで表示の切り替えを行っています。
html
1<svg class="mask_svgPc" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 1920 1200"> 2 <defs> 3 <clippath id="top_hero_mask"> 4 <polygon points="0,0 1920,0 1920,1200 0,1050 "></polygon> 5 </clippath> 6 </defs> 7 <image clip-path="url(#top_hero_mask)" xlink:href="/assets/img/namespace/top/hero_img.jpg" x="0" y="-20" width="1920" height="1320"></image> 8 </svg> 9<svg class="mask_svgSp" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 750 1330"> 10 <defs> 11 <clippath id="top_hero_maskSp"> 12 <polygon points="0,0 750,0 750,1330 0,1260 "></polygon> 13 </clippath> 14 </defs> 15 <image clip-path="url(#top_hero_maskSp)" xlink:href="/assets/img/namespace/top/hero_img_sp.jpg" x="0" y="0" width="750" height="1330"></image> 16 </svg>
ただ、devtoolのネットワークを見ると、どちらの画像も読み込まれており、20枚ほどの画像があるため
パフォーマンス的にあまり良くないと感じています。
imgタグのsrcsetのプロパティのように、スマホの場合にPC画像を読まないなどは可能なのでしょうか...?
ご教示頂けると幸いです、よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー