[Power Apps] SVGで遊びましょう　前編

Last updated at 2024-12-31Posted at 2024-12-31

Power AppsでSVGを使う準備

　Power Appsのキャンバスに、画像を挿入します。

　画像のImageプロパティに、SVGを書き込むための準備をします。

"data:image/svg+xml,"& 
EncodeUrl("
・・・・・・・・
")

　この、EncodeUrl(" と** ")** に囲まれた・・・の部分にSVGのコードを書き込みます。ただし、通常のSVGでは、SVGのコードの中にダブルコーテーションが使われています。そのまま書き込むと、前後のダブルコーテーションとバッティングしてしまいますので、シングルコーテーションに直さなければなりません。

viewBox

　SVGタグは、以下のような形です開始します。

svgタグで使われる属性

viewBox ｘ座標の最小値、Ｙ座標の最小値、幅、高さをスペースで区切って記述します
width 表示エリアの幅
heigh 表示エリアの高さ

キャンバスの画像のサイズを400x400にし、以下のコードをImageプロパティに設定します。

sample1

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='400' height='400' viewBox='-200, -200, 400, 400' style='background: #ff0000'
 xmlns='http://www.w3.org/2000/svg'>
  <circle cx='0' cy='0' r='200' fill='blue' />
</svg>
")

　この画像を、300x150のサイズに変更しても、画像の縦横比は崩れず、描画内容も変わりません。

　viewBoxは、図形のどの部分を表示するかをしてしています。この図形は、(0,0)の座標を中心に、半径200の円が描かれています。そのうち、(-200,-200)の座標から、幅400、高さ400の範囲を表示させていることになります。

　最初の座標の位置を、(0,0)に変えると、以下のように扇形の図形が表示されます。

ところが、viewBoxの幅を長くしてやると、

sample2

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='400' height='400' viewBox='0, 0, 400, 800' style='background: #ff0000'
 xmlns='http://www.w3.org/2000/svg'>
  <circle cx='0' cy='0' r='200' fill='blue' />
</svg>
")

　(-200,0)の位置が表示されています。これは、SVGが自動的に拡縮を行うためにおこる動作で、拡縮を行わないようにすると、以下のようになります。

sample3

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='400' height='400' viewBox='0, 0, 400, 800' style='background: #ff0000' preserveAspectRatio='none'
 xmlns='http://www.w3.org/2000/svg'>
  <circle cx='0' cy='0' r='200' fill='blue' />
</svg>
")

　図形のサイズを200x400にして、heightも変更してやると、縦横比が正しくなります。

sample4

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='400' height='800' viewBox='0, 0, 400, 800' style='background: #ff0000' preserveAspectRatio='none'
 xmlns='http://www.w3.org/2000/svg'>
  <circle cx='0' cy='0' r='200' fill='blue' />
</svg>
")

　そんな、結構めんどくさい動きをしますので、図形の描画は(0,0)から始めるようにし、viewBoxは書かないというのがわかりやすいと思います。

sample5

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='400' height='400' style='background: #ff0000'
 xmlns='http://www.w3.org/2000/svg'>
  <circle cx='200' cy='200' r='200' fill='blue' />
</svg>
")

基本シェイプ

　描画で使う要素は、line、circle、ellipse、polygon、polyline、rectがあります。

line

sample6

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='400' height='400' style='background: #eeeeee'
 xmlns='http://www.w3.org/2000/svg'>
  <line x1='0' y1='80' x2='300' y2='300' stroke='black' />
</svg>
")

線の設定

stroke-width 単位は em、ex、px、pt、pc、cm、mm、in
stroke-opacity 線の透明度 0.0～1.0
stroke-linecap 線の端の処理。butt（平ら）、round（丸）、square（四角）

stroke-linejoin 線の頂点の部分。miter(鋭角）、round（丸）、beval（面取り）
stroke-dasharray 点線や破線のパターン
stroke-dashoffset 点線の始まりの位置

sample7

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='30' height='10' xmlns='http://www.w3.org/2000/svg'>
  <!-- No dashes nor gaps -->
  <line x1='0' y1='1' x2='30' y2='1' stroke='black' />

  <!-- Dashes and gaps of the same size -->
  <line x1='0' y1='3' x2='30' y2='3' stroke='black'
          stroke-dasharray='4' />

  <!-- Dashes and gaps of different sizes -->
  <line x1='0' y1='5' x2='30' y2='5' stroke='black'
          stroke-dasharray='4 1' />

  <!-- Dashes and gaps of various sizes with an odd number of values -->
  <line x1='0' y1='7' x2='30' y2='7' stroke='black'
          stroke-dasharray='4 1 2' />

  <!-- Dashes and gaps of various sizes with an even number of values -->
  <line x1='0' y1='9' x2='30' y2='9' stroke='black'
          stroke-dasharray='4 1 2 3' />
</svg>
")

circle

sample8

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='200' height='200' style='background: #eeeeee'
 xmlns='http://www.w3.org/2000/svg'>
  <circle cx='100' cy='100' r='100' fill='blue' />
</svg>
")

ellipse

sample9

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='200' height='200' style='background: #eeeeee'
 xmlns='http://www.w3.org/2000/svg'>
  <ellipse cx='100' cy='50' rx='100' ry='50' />
</svg>
")

polygon

sample10

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='200' height='100' style='background: #eeeeee'
 xmlns='http://www.w3.org/2000/svg'>
  <!-- 既定で塗りつぶす多角形の例 -->
  <polygon points='0,100 50,25 50,75 100,0' />

  <!-- 同じ多角形で線を持ち塗りつぶされない例 -->
  <polygon points='100,100 150,25 150,75 200,0'
            fill='none' stroke='black' />
</svg>
")

rect

sample11

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='200' height='200' style='background: #eeeeee'
 xmlns='http://www.w3.org/2000/svg'>
<rect x='40' y='40' width='120' height='60' />
</svg>
")

スライダーを使ってSVGの値を変える

　キャンバスに図形を挿入します。
　横レイアウトのスライダーを２つ作り、SliderX、SliderWidthとします。
　縦レイアウトのスライダーを２つ作り、SliderY、SliderHeightとします。

　画像のImageプロパティに、以下のコードを入れます。

sample12

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='100' height='100' style='background: #eeeeee'
 xmlns='http://www.w3.org/2000/svg'>
<rect x='"& SliderX &"' y='"& 100- SliderY &"' width='"& SliderWidth &"' height='"& 100 - SliderHeight &"' />
</svg>
")

　スライダーを動かしてみましょう。

アニメーション要素

amnate

　先ほどの図に、以下のコードを入れます。

sample13

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='100' height='100' style='background: #eeeeee'
 xmlns='http://www.w3.org/2000/svg'>
<rect x='"& SliderX &"' y='"& 100- SliderY &"' width='"& SliderWidth &"' height='"& 100 - SliderHeight &"'>
  <animate attributeName='rx' values='0;20;0' dur='5s' repeatCount='indefinite' />
</rect>
</svg>
")

animateMotion

sample14

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='200' height='100' xmlns='http://www.w3.org/2000/svg'>
  <path fill='none' stroke='lightgrey'
    d='M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z' />

  <circle r='5' fill='red'>
    <animateMotion dur='10s' repeatCount='indefinite'
      path='M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z' />
  </circle>
</svg>
")

use

sample15

"data:image/svg+xml,"& 
EncodeUrl("
<svg viewBox='0 0 30 10' xmlns='http://www.w3.org/2000/svg'>
  <circle id='myCircle' cx='5' cy='5' r='4' stroke='blue'/>
  <use href='#myCircle' x='10' fill='blue'/>
  <use href='#myCircle' x='20' fill='white' stroke='red'/>
  <!--
stroke='red' will be ignored here, as stroke was already set on myCircle.
Most attributes (except for x, y, width, height and (xlink:)href)
do not override those set in the ancestor.
That's why the circles have different x positions, but the same stroke value.
  -->
</svg>
")

g

sdample16

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='200' height='200' xmlns='http://www.w3.org/2000/svg'>
<g id='myCircle'>
  <circle  cx='40' cy='40' r='40' stroke='blue' fill='green'/>
  <circle  cx='30' cy='30' r='20' stroke='blue' fill='red'/>
</g>

<use href='#myCircle' x='100' y='0' />
</svg>
")

symbol

sample17

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='200' height='200' xmlns='http://www.w3.org/2000/svg'>
<symbol id='myCircle'>
  <circle  cx='40' cy='40' r='40' stroke='blue' fill='green'/>
  <circle  cx='30' cy='30' r='20' stroke='blue' fill='red'/>
</symbol>

<use href='#myCircle' x='100' y='0' />
</svg>
")

sample18

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='200' height='100' style='background: #eeeeee' xmlns='http://www.w3.org/2000/svg'>
<symbol id='myCircle' width='80' height='80'>
  <circle  cx='40' cy='40' r='40' stroke='blue' fill='green'/>
  <circle  cx='30' cy='30' r='20' stroke='blue' fill='red'/>
</symbol>

<use href='#myCircle' x='0' y='0'>
  <animate attributeName='x' values='40;120;40' dur='4s' repeatCount='indefinite'/>
</use>
</svg>
")

テキスト

text

sample19

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='300' height='100' xmlns='http://www.w3.org/2000/svg'>
<text x='10' y='40' font-size='40'>日本語文字</text>
</svg>
")

sample20

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='300' height='100' xmlns='http://www.w3.org/2000/svg'>
<text x='10' y='40' font-size='40'>日本語文字
<animate attributeName='y' values='40;100;40' dur='2s' repeatCount='indefinite' />
<animate attributeName='font-size' values='0;100' dur='2s' repeatCount='indefinite' />
</text>
</svg>
")

textPath

sample21

"data:image/svg+xml,"& 
EncodeUrl("
<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>

  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path id='MyPath' fill='none' stroke='red'
        d='M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50' />
  <!-- </defs> -->

  <text>
    <textPath href='#MyPath'>
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

</svg>
")

tspan

sample22

"data:image/svg+xml,"& 
EncodeUrl("
<svg viewBox='0 0 240 40' xmlns='http://www.w3.org/2000/svg'>
  <style>
    text  { font: italic 12px serif; }
    tspan { font: bold 10px sans-serif; fill: red; }
  </style>

  <text x='10' y='30' class='small'>
    You are
    <tspan>not</tspan>
    a banana!
  </text>
</svg>
")

[Power Apps] SVGで遊びましょう　前編

Power AppsでSVGを使う準備

viewBox

基本シェイプ

line

線の設定

circle

ellipse

polygon

rect

スライダーを使ってSVGの値を変える

アニメーション要素

amnate

animateMotion

use

g

symbol

テキスト

text

textPath

tspan

path

効果

グラデーション洋装

フィルター構成要素

イラストデータからSVGを作成

IllustratorからSVGをエクスポート

VISIOからSVGを作成

[Power Apps] SVGで遊びましょう 前編

Power AppsでSVGを使う準備

viewBox

基本シェイプ

line

線の設定

circle

ellipse

polygon

rect

スライダーを使ってSVGの値を変える

アニメーション要素

amnate

animateMotion

use

g

symbol

テキスト

text

textPath

tspan

path

効果

グラデーション洋装

フィルター構成要素

イラストデータからSVGを作成

IllustratorからSVGをエクスポート

VISIOからSVGを作成

[Power Apps] SVGで遊びましょう　前編