ホームページ > 記事 > ウェブフロントエンド > HTML5 SVG を理解し、アダプティブダイヤモンドを描画する方法を説明します。

HTML5 SVG を理解し、アダプティブダイヤモンドを描画する方法を説明します。

青灯夜游転載: 2022-03-29 19:37:154400ブラウズ

この記事では、SVG について理解し、HTML5 の SVG 要素の特徴を理解し、SVG を使用してアダプティブダイヤモンドを描画する方法を紹介します。png 画像は必要ない場合もあります。皆様のお役に立てれば幸いです。

最近、ある考えの中でこのような問題に気づきました: フローチャートで一般的によくある、境界線のある適応サイズの菱形を描画する必要があります。その効果は次のとおりです。

HTML5 SVG を理解し、アダプティブダイヤモンドを描画する方法を説明します。

##境界線がない場合は、

CSSクリップパスを使用してひし形の形を簡単に切り抜くこともできますが、境界線は簡単ではありません(通常はインレイを使用します。1 つのレイヤー法または投影法を使用してシミュレートしますが、効果はあまり良くありません。) ここでは、このような効果を実現するためにスケーリング機能を駆使した SVG 法を紹介します。 #1. SVG の由来

SVG は通常、手書きコードを必要とせず (いくつかの基本的な形状を除く)、通常はデザインソフトウェアで生成できます (SVG は最初は機械が読み取れるように設計されていますが、これは人間が読むには非常に不利です)。たとえば、ここでは Figma で描画しました (1 つのポリゴンで十分です)。任意のサイズで問題ありません。

そして、この SVG HTML5 SVG を理解し、アダプティブダイヤモンドを描画する方法を説明します。

<svg width="167"    style="max-width: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>

効果が得られました。ブラウザでは次のようになります。

2. SVG スケーリング機能 HTML5 SVG を理解し、アダプティブダイヤモンドを描画する方法を説明します。

現在、SVG にはデフォルトのサイズが設定されています。SVG のデフォルトのサイズを手動で変更すると、

## は

object-fit:contain HTML5 SVG を理解し、アダプティブダイヤモンドを描画する方法を説明します。の効果と似ていますか?全体をカバーしたいのですが、無理に伸ばしたい場合はどうすればよいですか？ここでは SVG のスケーリング属性

preserveAspectRatio

を使用する必要があります。これは、SVG の実際のサイズが viewBox のサイズと一致しない場合のスケーリングルールを示します。これは ## に似ています。 #object-fit と object-position の組み合わせ。ここには多くの値がありますが、デフォルト値は xMidYMid で、強制的なスケーリングと中央揃えを意味します。 興味のある方は、次の記事を参照してください: SVG ビューポート、ビューボックス、preserveAspectRatio スケーリングについて、このケースは非常に詳細です

https://www .zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/
ここでは比例スケーリングは必要なく、直接
none
に設定できます。
<svg preserveAspectRatio="none">
...
</svg>

効果は次のとおりです

3. SVG ストロークスケーリング

不等比率スケーリングを設定した後、実際には小さな影響が生じます。ストロークの問題、さまざまなサイズ以下のように、ストロークの太さが異なります。 HTML5 SVG を理解し、アダプティブダイヤモンドを描画する方法を説明します。

ストロークが SVG サイズに合わせて拡大縮小されないようにする方法はありますか?もちろんありますよ！ SVG

vector-effect

には、ストロークを拡大縮小するかどうかを制御し、常にデフォルトのサイズを維持できる属性があります。興味がある場合は、この記事を参照してください。 HTML5 SVG を理解し、アダプティブダイヤモンドを描画する方法を説明します。 CSS Vector-エフェクトと SVG ストロークのスケーリング

。ここでは、属性

vector-effect="non-scaling-stroking" を path に追加するだけです。これは、ストロークがスケーリングされないことを意味します。次のようにスケーリングに従ってください

<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 HTML5 SVG を理解し、アダプティブダイヤモンドを描画する方法を説明します。

通常、このようなグラフィックは背景画像として適しています (SVG コードはページ上に配置するとあまり美しくありません)。驚くべきことに、SVG を Base64 に変換した後も、上記の特性は依然として存在します。ここでは、Zhang Xinxu 先生の

SVG オンライン圧縮および結合ツール

を次のように使用します。

转换后，将这段 base64 直接用作背景就行

div{
  background: url(&#39;data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY3IDkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iTTIuMTA4IDQ1TDgzLjUgMS4xMzYgMTY0Ljg5MiA0NSA4My41IDg4Ljg2NCAyLjEwOCA0NXoiIGZpbGw9IiNGRkVDQzciIGZpbGwtb3BhY2l0eT0iLjYiIHN0cm9rZT0iI0ZGQjIwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+&#39;)
}

这样就得到了一个自适应的菱形背景了