私の公開アカウントへようこそ：フロントエンドの探偵
最近、このような問題を考えてみました。適応サイズのダイヤモンドを描く必要があり、フローチャートで一般的によく見られる境界線もあり、その効果は次のとおりです。
境界線がない場合は、CSSクリップパスひし形を切り抜くのも非常に便利ですが、境界線の扱いが簡単ではありません（通常は1つのレイヤーや投影を入れ子にすることでシミュレートされますが、効果はあまり良くありません）。この効果を達成するためのズーム機能の
1. SVGはどこから来たのですか？
SVGは通常、手書きのコードを必要とせず（いくつかの基本的な形状を除く）、通常は設計ソフトウェアによって生成できます（SVGは設計の最初のマシン用に設計されているため、人間が読むのには非常に不利です）。たとえば、ここではFigmaを使用して描画しています（1つのポリゴンで十分です）。どのサイズでもかまいません。
それから私はこのSVGを手に入れました
<svg width="167" height="90" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" fill-opacity="0.6" stroke="#FFB200" stroke-width="2"/>
</svg>
复制代码ブラウザでの効果は次のとおりです。
第二に、SVGのスケーリング特性
SVGのデフォルトサイズを手動で変更すると、SVGのデフォルトサイズが次のようになります。
同様のobject-fit:contain効果がありますか？舗装全体を覆いたい場合は、強制ストレッチをどうすればよいですか？ここでは、SVGのズーム属性を使用する必要がありますprepareAspectRatio、 SVGの実際のサイズがサイズと一致しない場合viewBoxのスケーリングobject-fit規則を示し、とのobject-position組み合わせにいくらか似ています。ここには多くの値があります。デフォルト値はxMidYMidです。これは、比例スケーリングと中央揃えを強制することを意味します。
興味のある方は、この記事を参照してください。SVGビューポート、viewBox、preserveAspectRatioスケーリングを理解する、ケースは非常に詳細です
ここでは、比例スケーリングは必要ありません。直接noneに設定できます。
<svg preserveAspectRatio="none">
...
</svg>
复制代码効果は以下の通りです
3.SVGストロークスケーリング
不等スケーリングを設定した後、実際にはストロークに小さな問題があります。サイズが異なると、ストロークの太さは次のように異なります。
ストロークをSVGの寸法に合わせないようにする方法はありますか？もちろんあります！SVGには属性がありますベクトル効果ズームしないようにストロークを制御し、常にデフォルトのサイズを維持することができます。興味がある場合は、この記事を参照してください。CSSベクトル効果とSVGストロークストロークスケーリング、ここでは、次のように、ストロークがスケーリングに従わないことを示す属性をpath追加済みます。vector-effect="non-scaling-stroke"
<svg preserveAspectRatio="none">
<path vector-effect="non-scaling-stroke">...</path>
</svg>
复制代码このようにして、アダプティブサイズのダイアモンドが実現され、ストロークはスケーリングされません。完全なSVGコードは次のとおりです。
<svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path vector-effect="non-scaling-stroke" d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" fill-opacity="0.6" stroke="#FFB200" stroke-width="2"/>
</svg>
复制代码第4に、SVGインラインbase64
通常、このようなグラフィックは背景画像として適しています（SVGコードはページ上で見栄えがよくありません）。驚いたことに、SVGをbase64に変換した後も、上記の機能はまだ存在しています。ここでは張新徐さんのSVGオンライン圧縮およびマージツール、次のように
変換後は、このbase64をバックグラウンドとして直接使用してください
div{
background: url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY3IDkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iTTIuMTA4IDQ1TDgzLjUgMS4xMzYgMTY0Ljg5MiA0NSA4My41IDg4Ljg2NCAyLjEwOCA0NXoiIGZpbGw9IiNGRkVDQzciIGZpbGwtb3BhY2l0eT0iLjYiIHN0cm9rZT0iI0ZGQjIwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')
}
复制代码このようにして、適応性のあるダイヤモンドの背景が得られます。
もちろん、base64に変換した後は、リアルタイムで色を変更することはできず、全体として置き換える必要があります
完全なコードにアクセスできますSVGダイヤモンド
第五に、要約すると
この例から、SVGの自然な利点、特にストロークのズーム機能を確認できます。CSSを使用して描画すると、多くの問題が発生することが予想されます。実装ポイントの概要は次のとおりです。
- SVGは通常、設計ソフトウェアを介して描画およびエクスポートされます。手書きは必要ありません。
- SVGはデフォルトで元のスケールを維持し、スケーリングルールはpreserveAspectRatioを介して変更できます
- SVGストロークの太さは、デフォルトで全体のサイズに合わせてスケーリングされ、ベクトル効果設定によって元のサイズを維持できます。
- SVGは、base64に変換した後も上記の特性を備えており、背景画像としての使用に適しています。
SVGは、グラフィックスの描画、特にスケーリングと適応性がより柔軟な幾何学的形状の場合に常に有利でした。CSSの実装が難しい場合は、SVGを検討してください。最後に、それがあなたにとって良くて役立つと思うなら、いいね、ブックマーク、そして転送してください❤❤❤
私の公開アカウントへようこそ：フロントエンドの探偵