SVG リソースの使用
SVG リソースをコンポーネントに追加するには、2 つの方法があります。1 つは SVG リソースをコンポーネントの HTML テンプレートに直接追加する方法。もう 1 つは SVG リソースを静的リソースとしてアップロードしてから、コンポーネントの JavaScript ファイルにインポートする方法です。
SVG (Scalable Vector Graphics) は、直線、曲線、図形、テキストを定義できる、XML ベースの画像形式です。次に、赤の長方形、緑の円、「SVG」という白のテキストを含むファイルの例を示します。
このように、各図形には、どのような図形か (たとえば、rect
は長方形)、サイズ、色を記述するタグがあります。
HTML テンプレートに SVG リソースを含めるには、他の要素と同様に <template>
タグでリソースを囲みます。
-
SVG ファイルで、
id
属性を<svg>
タグに追加します。 -
SVG リソースを静的リソースとして組織にアップロードします。
-
コンポーネントの JavaScript ファイルで、静的リソースをインポートします。静的リソースへの参照をその
id
と連結する項目を定義します。 -
SVG の
<use>
要素を使用して、HTML テンプレートの項目を参照します。
Lightning Web コンポーネントは、SVG タグの制限付きリストをサポートします。
<svg>
<a>
<altglyph>
<altglyphdef>
<altglyphitem>
<animatecolor>
<animatemotion>
<animatetransform>
<audio>
<canvas>
<circle>
<defs>
<desc>
<ellipse>
<filter>
<font>
<g>
<glyph>
<glyphref>
<hkern>
<image>
<line>
<lineargradient>
<marker>
<mask>
<mpath>
<path>
<pattern>
<polygon>
<polyline>
<radialgradient>
<rect>
<stop>
<switch>
<symbol>
<text>
<title>
<tref>
<tspan>
<video>
<view>
<vkern>
<use>
関連トピック