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

https://developer.mozilla.org/ja/docs/Web/SVG

# Power AppsでSVGを使う準備
　Power Appsのキャンバスに、画像を挿入します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/03e382e7-bf44-8f6a-c910-ccdf337ffef5.png)

　画像の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>
")
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/730266a7-a187-41c9-75e5-622b8969cb40.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/0d74e22d-58bb-872d-810c-30696a1b178c.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/b91298ff-07c2-ec71-093e-cd6c1f16d85e.png)

 ところが、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>
")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/2772b881-d591-0743-1c18-f30d5d44ebbf.png)

　(-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>
")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/53bec434-f1b8-2a76-0e72-ce98de3e2cef.png)

　図形のサイズを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>
")
```

https://qiita.com/mochizukikotaro/items/625ea40fdc209b9028a0

# 基本シェイプ
　描画で使う要素は、line、circle、ellipse、polygon、polyline、rectがあります。

## [line](https://developer.mozilla.org/ja/docs/Web/SVG/Element/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>
")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/874a54c1-33a7-f716-137c-578854a33cf7.png)

### 線の設定

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/9ff62882-6227-b8c7-9233-90ac054bc3cd.png)

- **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>
")
````
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/0ff598fe-1873-c0c6-7194-cc631bdb1bb1.png)

## [circle](https://developer.mozilla.org/ja/docs/Web/SVG/Element/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>
")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/d76a5cbc-2ff3-5e4e-7a29-02c3ad745c9d.png)

## [ellipse](https://developer.mozilla.org/ja/docs/Web/SVG/Element/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>
")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/94103dd9-89d9-e570-d523-aeeacdfece32.png)

## [polygon](https://developer.mozilla.org/ja/docs/Web/SVG/Element/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>
")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/10713f4c-0a1f-878a-3ac5-774ac76df5ae.png)

## [rect](https://developer.mozilla.org/ja/docs/Web/SVG/Element/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>
")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/2a26c533-42fc-691a-a51b-a1ee9f9b94c4.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/701ad317-3fce-8edc-6651-44f8b0f5e082.png)

　画像の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>
")
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/667a60fd-ed55-a6b1-3c66-f95887844ea1.png)

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

# アニメーション要素

## [amnate](https://developer.mozilla.org/ja/docs/Web/SVG/Element/animate)
　先ほどの図に、以下のコードを入れます。

```: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>
")
```
![anim.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/0454d675-96e3-e495-dcda-d6f36063830d.gif)


## [animateMotion](https://developer.mozilla.org/ja/docs/Web/SVG/Element/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>
")
```
![ami3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/d5bcb90c-d810-0daa-410a-a480c9fe0be5.gif)

# 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>
")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/89bbd6a0-9a65-c9af-619a-20766db00bc0.png)

## 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>
")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/25b625c8-d59f-df4a-2937-1075583564fe.png)

## 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>
")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/f6d03b3e-cbd5-fd11-0855-ac0cd32aad6e.png)

```: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>
")
```
![ani4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/0faae34b-49f3-b09d-3c24-59f129b36327.gif)


# テキスト

## 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>
")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/0262e610-58b4-4b52-d696-92ea276149e8.png)

```: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>
")
```
![ani6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/23d03d56-708b-1d4f-b859-18b0362a36e3.gif)

## 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>
")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/4a454dba-3f7c-9ff6-6595-fbff6e8eb597.png)

## 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>
")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/88ae8ab7-0727-66b4-e5e3-b70e9bbe1da0.png)

# path

# 効果
## グラデーション洋装
##光源要素
## フィルター構成要素

# イラストデータからSVGを作成
## IllustratorからSVGをエクスポート
## VISIOからSVGを作成
https://products.aspose.app/diagram/ja/conversion/visio-to-svg