高度な SVG 画像を追加する

高度な SVG 画像をキャンバスに追加して、デザイン時またはランタイムに個別の画像パーツのプロパティを変更します。
ヒント: たとえば、ハードウェア コンポーネントの表現をハイライトすることで、ハードウェア部品の不具合を知らせることができます。
前提条件
画像のプロパティを制御するには、次の要件に準拠する SVG ファイルを取得します。
  • ファイル形式は SVG 1.2 Tiny です
  • ファイルには、構成するすべての画像エレメントとプロパティが含まれます
  • 塗りつぶしとストロークのプロパティが存在し、XML 属性またはインライン CSS として定義された色を持っています
  • 色値は 16 進数です
ヒント: SVG ファイルが要件に準拠していない場合、画像は期待どおりに表示されますが、画像プロパティを変更することはできません。
  1. 高度な SVG 画像を追加するには
  2. [プロジェクトビュー]
     で、画像を含むオブジェクトまたはフォルダーを右クリックし、
    [新規]
    [図面]
    [高度な SVG 画像]
     を選択します。
  3. 含める画像を選択します。
    • [プロパティ]
       の
      [パス]
       の横にある
      [参照]
       を選択し、アプリケーションに含める画像を選択します。
    • エディタで、 をダブルクリックし、アプリケーションに含める画像を選択します。
    ヒント:
    項目を検索するには、
    [ファイルの選択]
     で検索する項目名の入力を開始します。
    [ファイルの選択]
     にファイルが表示されない場合は
    [ファイルのインポート]
     を選択し、
    [ファイルのインポート]
     でインポートするファイルを選択し、
    [選択]
     を選択します。
  4. (オプション) 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>
  5. [プロパティ]
     で
    [SVG エレメントプロパティ]
     を展開し、
    [ID]
     で変更する画像エレメントを選択します。
    ヒント: SVG ファイルエレメントのドロップダウンオプションは SVG ファイルエレメントの
    @id
     属性に対応します。ドロップダウンに値が表示されない場合は、SVG 画像が画像プロパティの制御に必要な要件を満たしていない可能性があります。
  6. [プロパティ]
    で、選択した画像エレメントの変更するプロパティを選択し、
    [値]
     で
    [ダイナミックリンクの追加]
     を選択して複雑なダイナミックリンクを作成するか、指示されたプロパティの値を入力します:
    • [色]
      。色の 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 画像ファイル内にある必要があり、そうでない場合は画像エレメントのプロパティを構成できません。
  7. SVG のプロパティを追加するには、
    [SVG エレメントプロパティ]
     の横にある
    Add
     を選択し、手順 4 と 5 を繰り返します。
    たとえば、SVG 画像エレメントに
    [色]
     を構成した場合、
    [不透明度]
     プロパティを追加すると、同じ画像エレメントまたは別の画像エレメントの不透明度を変更できます。
  8. SVG の既定のプロパティを変更するには、
    [プロパティ]
     で
    [外観]
     を展開し、複雑なダイナミックリンクを作成するか、値を入力してプロパティを変更します。
  9. (オプション)
    [プロパティ]
     で、
    [外観]
     の設定を編集します。
    • [表示]
      。ランタイムにオブジェクトを表示します。
    • [有効]
      。ランタイムにオブジェクトの操作を有効にします。
    • [不透明度]
      。オブジェクトの不透明度レベル (パーセンテージ単位)。オブジェクトを透明にするには、
      0
       に設定します。
    • [点滅]
      。ランタイムにオブジェクトを点滅させます。
    • [回転]
      。中心点を中心にオブジェクトを回転させます (弧度)。正の値を指定すると、オブジェクトが時計回りに回転します。負の値を指定すると、オブジェクトが反時計回りに回転します。
    • [クリックしてテストを表示]
      。ユーザー選択を停止します。デフォルトでは偽 - ユーザーの選択はインターセプトされず、基になるオブジェクトに渡されます。
    • [フィルモード]
      。以下のいずれかを選択します:
      • [フィット]
        。オブジェクトは、サイズを変更しても元のアスペクト比を維持します。
      • [ストレッチ]
        。オブジェクトはコンテナを埋め尽くし、サイズ変更時に元のアスペクト比を無視します。
      • [タイル]
        。オブジェクトは、サイズを変更しても元のアスペクト比を維持し、内部で画像を繰り返します。
    • [色化モード]
      。画像の色付けモードを設定します。利用可能なオプションは次のとおりです。
      [置換]
      、
      [色相]
      、
      [乗算]
      、
      [加算]
      。
    • [移動するエレメント]
      。「グラフィックオブジェクトを移動可能にする」を参照してください。
  10. (オプション) オブジェクトのサイズ変更、移動、整列を行うには、「グラフィックオブジェクト レイアウト」を参照してください。
  11. (オプション)
    [イベント]
     で、既存のイベントにメソッドを追加するか、新しいイベントとメソッドを追加します。「イベント」と「メソッド」を参照してください。
高度な SVG 画像の例 - 無効なアラーム (灰色のコンベヤ シャーシ)
アラームの切り替えが無効化されたコンベヤ シャーシのアイコン。
高度な SVG 画像の例 - 有効なアラーム (赤色のコンベヤ シャーシ)
故障アラームをトリガーする切り替え付きのコンベヤ シャーシのアイコン。
ご質問やご意見
このドキュメントに関するご質問やご意見は、こちらまでお寄せください。 こちらからご意見をお寄せください。
Normal