- プロジェクトの作成
- オブジェクトと変数のリファレンス
- プロジェクトの拡張
- チュートリアル
- グラフィックオブジェクト チュートリアル
高度な SVG 画像を追加する
高度な SVG 画像をキャンバスに追加して、デザイン時またはランタイムに個別の画像パーツのプロパティを変更します。たとえば、ハードウェア コンポーネントの表現をハイライトすることで、ハードウェア部品の不具合を知らせることができます。
前提条件
画像のプロパティを制御するには、次の要件に準拠する SVG ファイルを取得します。
- ファイル形式は SVG 1.2 Tiny です
- ファイルには、構成するすべての画像エレメントとプロパティが含まれます
- 塗りつぶしとストロークのプロパティが存在し、XML 属性またはインライン CSS として定義された色を持っています
- 色値は 16 進数です
例: 要件に準拠する SVG ファイル。
ヒント:
SVG ファイルが要件に準拠していない場合、画像は期待どおりに表示されますが、画像プロパティを変更することはできません。
- 高度な SVG 画像を追加するには
- [プロジェクトビュー]で、画像を含むオブジェクトまたはフォルダーを右クリックし、 を選択します。
- キャンバスに表示される空の画像をダブルクリックします。
- [ファイルの選択]で、表示する画像を選択し、[選択]を選択します。ヒント:項目を検索するには、[ファイルの選択]で検索する項目名の入力を開始します。[ファイルの選択]にファイルが表示されない場合はを選択し、[ファイルのインポート][ファイルのインポート]でインポートするファイルを選択し、[選択]を選択します。
- (オプション) SVG ファイルをテキストエディターで開き、変更する画像エレメントの@id属性と変更するプロパティの両方が SVG ファイルに存在することを確認します。例: シャーシのポリゴンスタイルを変更できるようにする場合:<g id="ConveyorChassis"> <polygon style="fill:#3C4660;" points="8.532,379.733 503.466,379.733 503.466,277.333 8.532,277.333"/> </g>
- [プロパティ]で[SVG エレメントプロパティ]を展開し、[ID]で変更する画像エレメントを選択します。ヒント: SVG ファイルエレメントのドロップダウンオプションは SVG ファイルエレメントの@id属性に対応します。ドロップダウンに値が表示されない場合は、SVG 画像が画像プロパティの制御に必要な要件を満たしていない可能性があります。
- [プロパティ]で、選択した画像エレメントの変更するプロパティを選択し、[値]で[ダイナミックリンクの追加]を選択して複雑なダイナミックリンクを作成するか、指示されたプロパティの値を入力します:
- [色]。色の 16 進数値を選択または入力するか、16 進数の色値のコンバータを使用して複雑なダイナミックリンクを作成します。例:
- [不透明度]。画像エレメントを完全に透明または完全に不透明にするには、0〜100 の値を入力します。
- [ストローク幅]。線の幅をピクセル単位で入力します。
- [ストロークの破線配列]。ダッシュの配列は、次のいずれかの方法で指定します。
- [ソリッド]を選択または入力します。これがデフォルトです。
- 単一の数字を入力します。この数字は、ダッシュの長さとダッシュ間のスペースの長さの両方を表します。たとえば、「5」と入力すると、破線の長さと破線の間隔の長さの両方が 5 ピクセルになります。
- セミコロンで区切られた数列を繰り返し可能な形式 #;# で構成します。最初の数字はダッシュの長さを表し、各セミコロンの後の数字はダッシュ間の長さのスペースを表します。入力した数列が繰り返されます。たとえば、5;2;10;3 と入力すると、最初のダッシュが 5 ピクセル、そのダッシュの後のスペースが 2 ピクセルになり、その後に 10 ピクセルのダッシュと 3 ピクセルのスペースが続きます。数列が繰り返され、短いダッシュが表示され、その後に長いダッシュが行全体に表示されます。
ヒント:dasharray プロパティをコントローラの文字列変数またはタグにバインドする場合、無効な文字列値によって、ランタイムにその値が SVG ファイルの値に変更されると、dasharray プロパティ値が生成されます。たとえば、ダッシュ配列が高度な SVG では実線として定義されていますが、現在はダッシュパターンとして表示されている場合、dasharray プロパティのバインドされたタグの値が abc のような無効な値に変更されたり、1;5:8 のような文字列フォーマットのタイプミスが含まれている場合、値は SVG ファイルで指定された実線に戻ります。ヒント: 画像エレメントに対して選択するプロパティは、画像エレメントとともに SVG 画像ファイル内にある必要があり、そうでない場合は画像エレメントのプロパティを構成できません。 - SVG のプロパティを追加するには、[SVG エレメントプロパティ]の横にあるを選択し、手順 5 と 6 を繰り返します。たとえば、SVG 画像エレメントに[色]を構成した場合、[不透明度]プロパティを追加すると、同じ画像エレメントまたは別の画像エレメントの不透明度を変更できます。
- SVG の既定のプロパティを変更するには、[プロパティ]で[外観]を展開し、複雑なダイナミックリンクを作成するか、値を入力してプロパティを変更します。
高度な SVG 画像の例 - 無効なアラーム (灰色のコンベヤ シャーシ)

高度な SVG 画像の例 - 有効なアラーム (赤色のコンベヤ シャーシ)

SVG
高度な SVG
ご質問やご意見