SVG マスキングを使用した背景の透明なテキストのクリッピング
提供された畫像に見られるように、背景に透明なテキストの切り抜き効果を?qū)g現(xiàn)するという問(wèn)題が生じました。 CSS テクニックも考慮されますが、より最適なアプローチは、SVG マスキングを備えたインライン SVG を利用することです。
CSS と比較して、このアプローチにはいくつかの重要な利點(diǎn)があります。
-
強(qiáng)化されたブラウザのサポート: IE10、Chrome、Firefox、およびSafari。
-
SEO 保護(hù): スパイダーは SVG コンテンツを効果的にクロールしてインデックスを作成し、検索エンジン最適化 (SEO) の取り組みに悪影響を與えません。
は次のとおりです。參考用の CodePen デモ:
[CodePenデモ](https://codepen.io/animanimal/pen/pxKVQm)
次のコード スニペットは実裝の概要を示しています。
<!DOCTYPE html>
<html>
<head>
<title>SVG Text Mask</title>
<style>
body,html{height:100%;margin:0;padding:0;}
body{
background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
background-size:cover;
background-attachment:fixed;
}
svg{width:100%;}
</style>
</head>
<body>
<svg viewbox="0 0 100 60">
<defs>
<mask>
これこれを?qū)g裝すると、SEO の利點(diǎn)を維持しながらテキストの視覚的な透明性が保たれるため、純粋な CSS 技術(shù)と比較してより効果的なソリューションになります。
以上がSEO を向上させるために、SVG マスキングを使用して透明なテキストのカットアウト効果を作成するにはどうすればよいですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。