はじめに
この記事は自身への備忘録やコピペ用に作成した記事です。
Power Apps でSVG を用いて図形を描画する際のサンプルコードを列挙します。
Power Apps のと記載しましたが、もちろんSVG を記載するうえで参考になる部分はあると思います。
SVG のリファレンスに関してはこちらをご確認ください。
developer.mozilla.org
円
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<circle cx='50' cy='50' r='50' fill='black'/>
</svg>"
)
四角
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<rect x='10' y='10' width='100' height='100'/>
</svg>"
)
四角⇔円に変化するアニメーション
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<rect width='100' height='100'>
<animate attributeName='rx' values='0;100;0;' dur='5s' repeatCount='indefinite' />
</rect>
</svg>"
)
円の大きさが変化するアニメーション
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<circle cx='50' cy='50' fill='black'>
<animate attributeName='r' values='0;50;0;' dur='5s' repeatCount='indefinite' />
</circle>
</svg>"
)
四角形の幅が変化するアニメーション
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<rect height='100'>
<animate attributeName='width' values='0;100;0;' dur='5s' repeatCount='indefinite' />
</rect>
</svg>"
)
四角形の高さが変化するアニメーション
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<rect width='100'>
<animate attributeName='height' values='0;100;0;' dur='5s' repeatCount='indefinite' />
</rect>
</svg>"
)
四角形の幅と高さが変化するアニメーション
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<rect width='100' height='100'>
<animate attributeName='width' values='0;100;0;' dur='5s' repeatCount='indefinite' />
<animate attributeName='height' values='0;100;0;' dur='5s' repeatCount='indefinite' />
</rect>
</svg>"
)
ひし形
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<polygon points='50 10, 90 50, 50 90, 10 50' fill='#99f' />
</svg>"
)
楕円
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<ellipse cx='50' cy='50' rx='30' ry='18' stroke='black' fill='#fff' stroke-width='2' />
</svg>"
)
トライアングル
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<path d='M 5 70 L 50 25 L 95 70 L 60 70' stroke='black' fill='transparent' stroke-width='2' />
</svg>"
)
モーションパスに沿って移動するアニメーション
"data:image/svg+xml,"&
EncodeUrl(
"<svg width='120' height='120' viewBox='0 0 120 120'
xmlns='http://www.w3.org/2000/svg' version='1.1'
xmlns:xlink='http://www.w3.org/1999/xlink'>
<!-- Draw the outline of the motion path in grey, along
with 2 small circles at key points -->
<path d='M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110'
stroke='lightgrey' stroke-width='2'
fill='none' id='theMotionPath'/>
<circle cx='10' cy='110' r='3' fill='lightgrey' />
<circle cx='110' cy='10' r='3' fill='lightgrey' />
<!-- Red circle which will be moved along the motion path. -->
<circle cx='' cy='' r='5' fill='red'>
<!-- Define the motion path animation -->
<animateMotion dur='6s' repeatCount='indefinite'>
<mpath xlink:href='#theMotionPath'/>
</animateMotion>
</circle>
</svg>"
)
回転する三角形
"data:image/svg+xml,"&
EncodeUrl(
"<?xml version='1.0'?>
<svg width='120' height='120' viewBox='0 0 120 120'
xmlns='http://www.w3.org/2000/svg' version='1.1'
xmlns:xlink='http://www.w3.org/1999/xlink' >
<polygon points='60,30 90,90 30,90'>
<animateTransform attributeName='transform'
attributeType='XML'
type='rotate'
from='0 60 70'
to='360 60 70'
dur='10s'
repeatCount='indefinite'/>
</polygon>
</svg>"
)
動く四角形
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<rect x='0' y='0' width='" & Self.Height & "' height='" & Self.Height & "' fill='black'>
<animate attributeName='x' from='-100' to='" & Self.Width & "' dur='4s' repeatCount='indefinite' />
</rect>
</svg>"
)
格子上の模様をつける
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 230 100' xmlns='http://www.w3.org/2000/svg'>
<defs>
<pattern id='grid' viewBox='0,0,10,10' width='10%' height='10%'>
<polygon points='0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2'/>
</pattern>
</defs>
<circle cx='50' cy='50' r='50' fill='url(#grid)'/>
<circle cx='180' cy='50' r='40' fill='none' stroke-width='20' stroke='url(#grid)'/>
</svg>"
)
ハート
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
<path d='M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z'/>
</svg>"
)
マスク
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<mask id='myMask'>
<!-- Everything under a white pixel will be visible -->
<rect x='0' y='0' width='100' height='100' fill='white' />
<!-- Everything under a black pixel will be invisible -->
<path d='M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z' fill='black' />
</mask>
<polygon points='-10,110 110,110 110,-10' fill='orange' />
<!-- with this mask applied, we 'punch' a heart shape hole into the circle -->
<circle cx='50' cy='50' r='50' mask='url(#myMask)' />
</svg>"
)
ぼかす
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "&Self.Width&" "&Self.Height&"' xmlns='http://www.w3.org/2000/svg'>
<defs>
<filter id='blur'>
<feGaussianBlur stdDeviation='5'/>
</filter>
</defs>
<circle cx='50' cy='50' r='50' fill='blue' filter='url(#blur)'/>
</svg>"
)
影をつける
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "&Self.Width&" "&Self.Height&"' xmlns='http://www.w3.org/2000/svg'>
<defs>
<filter id='shadow'>
<feDropShadow dx='10' dy='10' stdDeviation='5'/>
</filter>
</defs>
<circle cx='50' cy='50' r='50' fill='blue' filter='url(#shadow)'/>
</svg>"
)
回転する星
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<polygon id='myPoly' fill='#FFF000' stroke='#FF0000' points='72.278,58.394 78.338,91.04 48.74,75.993 19.565,91.844 24.729,59.045 0.639,36.196 33.428,30.972 47.715,1 62.814,30.57 95.734,34.895 ' transform='rotation'>
<animateTransform attributeName='transform'
begin='0s'
dur='3s'
type='rotate'
from='360 50 50'
to='0 50 50'
repeatCount='indefinite' />
</polygon>
</svg>"
)
渦巻
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<path d='m 71.815483,79.375008 c 0.379024,4.661976 -6.097254,2.810971 -7.748511,0.629963 -4.474806,-5.910399 0.64058,-13.727975 6.488585,-16.126986 10.460708,-4.291269 21.500027,3.544086 24.505461,13.607133 C 99.471613,92.253044 88.608573,106.89197 74.335336,110.36905 55.311355,115.00345 36.969959,101.01106 33.072925,82.524823 28.168906,59.261785 45.334033,37.175352 68.035704,32.883938 95.530469,27.686461 121.38386,48.046561 126.05506,74.965266 131.55991,106.68803 107.99196,136.32124 76.855188,141.3631 40.906556,147.18413 7.4853081,120.4002 2.0788793,85.044676 -4.0642488,44.871487 25.941108,7.6566196 65.515852,1.8898923 109.91273,-4.5795043 150.92519,28.65111 157.04911,72.445413 163.84782,121.06539 127.38915,165.87837 79.375041,172.35715' stroke='lightgrey' fill='transparent' stroke-width='2' />
</svg>"
)
3Dキューブ
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<path d='M 14.973676,89.153138 50.784897,25.914845 V 101.3499 l -35.811221,32.4797 z' stroke='black' fill='#e9e9ff' stroke-width='2' fill-opacity='0.5' />
<path d='M 0.75595247,80.886905 V 129.584 L 14.973676,133.8296 V 89.153138 Z' stroke='black' fill='#353564' stroke-width='2' fill-opacity='0.5' />
<path d='M 0.75595247,80.886905 30.994048,0.79166829 50.784897,25.914845 14.973676,89.153138 Z' stroke='black' fill='#4d4d9f' stroke-width='2' fill-opacity='0.5' />
<path d='M 0.75595247,129.584 30.994048,88.446429 50.784897,101.3499 14.973676,133.8296 Z' stroke='black' fill='#afafde' stroke-width='2' fill-opacity='0.5' />
<path d='M 30.994048,0.79166829 V 88.446429 L 50.784897,101.3499 V 25.914845 Z' stroke='black' fill='#d7d7ff' stroke-width='2' fill-opacity='0.5' />
<path d='M 0.75595247,80.886905 30.994048,0.79166829 V 88.446429 L 0.75595247,129.584 Z' stroke='black' fill='#8686bf' stroke-width='2' fill-opacity='0.5' />
</svg>"
)
回転する3Dキューブ(その1)
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<path d='M 73.642864,83.30019 131.17597,71.637295 V 132.38138 L 73.642864,122.08462 Z' stroke='black' fill='#e9e9ff' stroke-width='2' fill-opacity='0.5' transform='rotation' >
<animateTransform attributeName='transform'
begin='0s'
dur='3s'
type='rotate'
from='0 100 100'
to='360 100 100'
repeatCount='indefinite' />
</path>
<path d='m 31.576366,75.30557 v 53.83722 l 42.066498,-7.05817 V 83.30019 Z' stroke='black' fill='#353564' stroke-width='2' fill-opacity='0.5' transform='rotation'>
<animateTransform attributeName='transform'
begin='0s'
dur='3s'
type='rotate'
from='0 100 100'
to='360 100 100'
repeatCount='indefinite' />
</path>
<path d='M 31.576366,129.14279 91.557712,154.57107 131.17597,132.38138 73.642864,122.08462 Z' stroke='black' fill='#4d4d9f' stroke-width='2' fill-opacity='0.5' transform='rotation'>
<animateTransform attributeName='transform'
begin='0s'
dur='3s'
type='rotate'
from='0 100 100'
to='360 100 100'
repeatCount='indefinite' />
</path>
<path d='M 31.576366,75.30557 91.557712,46.503569 131.17597,71.637295 73.642864,83.30019 Z' stroke='black' fill='#afafde' stroke-width='2' fill-opacity='0.5' transform='rotation'>
<animateTransform attributeName='transform'
begin='0s'
dur='3s'
type='rotate'
from='0 100 100'
to='360 100 100'
repeatCount='indefinite' />
</path>
<path d='M 91.557712,46.503569 V 154.57107 L 131.17597,132.38138 V 71.637295 Z' stroke='black' fill='#d7d7ff' stroke-width='2' fill-opacity='0.5' transform='rotation'>
<animateTransform attributeName='transform'
begin='0s'
dur='3s'
type='rotate'
from='0 100 100'
to='360 100 100'
repeatCount='indefinite' />
</path>
<path d='M 31.576366,75.30557 91.557712,46.503569 V 154.57107 L 31.576366,129.14279 Z' stroke='black' fill='#8686bf' stroke-width='2' fill-opacity='0.5' transform='rotation'>
<animateTransform attributeName='transform'
begin='0s'
dur='3s'
type='rotate'
from='0 100 100'
to='360 100 100'
repeatCount='indefinite' />
</path>
</svg>"
)
回転する3Dキューブ(その2)
"data:image/svg+xml,"&
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<path d='M 73.642864,83.30019 131.17597,71.637295 V 132.38138 L 73.642864,122.08462 Z' stroke='black' fill='#e9e9ff' stroke-width='2' fill-opacity='0.5' transform='rotation' >
<animateTransform attributeName='transform'
begin='0s'
dur='3s'
type='rotate'
from='0 100 100'
to='360 100 100'
repeatCount='indefinite' />
</path>
<path d='m 31.576366,75.30557 v 53.83722 l 42.066498,-7.05817 V 83.30019 Z' stroke='black' fill='#353564' stroke-width='2' fill-opacity='0.5' transform='rotation'>
<animateTransform attributeName='transform'
begin='0s'
dur='3s'
type='rotate'
from='0 50 50'
to='360 100 100'
repeatCount='indefinite' />
</path>
<path d='M 31.576366,129.14279 91.557712,154.57107 131.17597,132.38138 73.642864,122.08462 Z' stroke='black' fill='#4d4d9f' stroke-width='2' fill-opacity='0.5' transform='rotation'>
<animateTransform attributeName='transform'
begin='0s'
dur='3s'
type='rotate'
from='0 80 80'
to='360 100 100'
repeatCount='indefinite' />
</path>
<path d='M 31.576366,75.30557 91.557712,46.503569 131.17597,71.637295 73.642864,83.30019 Z' stroke='black' fill='#afafde' stroke-width='2' fill-opacity='0.5' transform='rotation'>
<animateTransform attributeName='transform'
begin='0s'
dur='3s'
type='rotate'
from='0 120 120'
to='360 100 100'
repeatCount='indefinite' />
</path>
<path d='M 91.557712,46.503569 V 154.57107 L 131.17597,132.38138 V 71.637295 Z' stroke='black' fill='#d7d7ff' stroke-width='2' fill-opacity='0.5' transform='rotation'>
<animateTransform attributeName='transform'
begin='0s'
dur='3s'
type='rotate'
from='0 30 30'
to='360 100 100'
repeatCount='indefinite' />
</path>
<path d='M 31.576366,75.30557 91.557712,46.503569 V 154.57107 L 31.576366,129.14279 Z' stroke='black' fill='#8686bf' stroke-width='2' fill-opacity='0.5' transform='rotation'>
<animateTransform attributeName='transform'
begin='0s'
dur='3s'
type='rotate'
from='0 140 140'
to='360 100 100'
repeatCount='indefinite' />
</path>
</svg>"
)
跳ねる3つのボール
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<path d='M 25 80 L 25 10 L 25 80' stroke='transparent' fill='transparent' stroke-width='2' id='theMotionPath1' />
<path d='M 50 60 L 50 10 L 50 80 L 50 60' stroke='transparent' fill='transparent' stroke-width='2' id='theMotionPath2' />
<path d='M 75 40 L 75 10 L 75 80 L 75 40' stroke='transparent' fill='transparent' stroke-width='2' id='theMotionPath3' />
<circle cx='' cy='' r='10' fill='red'>
<animateMotion dur='1s' repeatCount='indefinite'>
<mpath xlink:href='#theMotionPath1'/>
</animateMotion>
</circle>
<circle cx='' cy='' r='10' fill='red'>
<animateMotion dur='1s' repeatCount='indefinite'>
<mpath xlink:href='#theMotionPath2'/>
</animateMotion>
</circle>
<circle cx='' cy='' r='10' fill='red'>
<animateMotion dur='1s' repeatCount='indefinite'>
<mpath xlink:href='#theMotionPath3'/>
</animateMotion>
</circle>
</svg>"
)
虹色で塗りつぶし
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<defs>
<linearGradient id='grad' x1='0%' y1='0%' x2='100%' y2='0%'>
<stop offset='0%' stop-color='#ff0000' />
<stop offset='16.7%' stop-color='#ffff00'/>
<stop offset='33.3%' stop-color='#00ff00'/>
<stop offset='50.0%' stop-color='#00ffff'/>
<stop offset='66.7%' stop-color='#0000ff'/>
<stop offset='83.3%' stop-color='#ff00ff'/>
<stop offset='100%' stop-color='#ff0000'/>
</linearGradient>
</defs>
<rect x='0' y='0' width='100' height='100' fill='url(#grad)' />
<circle cx='150' cy='50' r='40' fill='none' stroke-width='15' stroke='url(#grad)'/>
</svg>"
)
手書き風模様
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<path d='M 83.910714,34.773809 C 83.65873,33.765873 84.131165,32.105057 83.15476,31.75 c -2.36813,-0.86114 -5.03968,0 -7.559522,0 -17.593328,0 -41.23065,0.258532 -45.357144,21.922618 -0.917128,4.814921 -0.456907,9.519994 2.267857,13.607142 6.94281,10.414214 32.757441,18.478672 43.089287,21.922621 9.5284,3.176132 11.477366,1.897133 19.654761,6.803569 4.696698,2.818022 5.291671,7.25328 5.291671,12.09524 0,0.75595 0.29778,1.57303 0,2.26786 -2.046509,4.77518 -9.374798,13.58418 -14.363099,15.11904 -6.040265,1.85855 -12.590655,1.89422 -18.898811,1.51191 -6.130877,-0.37157 -14.757582,-2.48253 -19.654761,-6.80357 -6.694275,-5.90672 -7.559524,-15.27572 -7.559524,-23.434525 0,-0.755955 -0.312814,-1.579666 0,-2.267858 0.983697,-2.164135 2.274422,-4.207758 3.779764,-6.047621 4.296706,-5.251529 11.430555,-5.116938 17.386903,-6.047618 23.373619,-3.652128 4.016097,-1.564129 31.749999,-3.023809 2.038498,-0.107289 13.900559,-0.55576 15.874999,-3.023809 1.55481,-1.943513 1.03006,-9.146434 0.75595,-11.339285 -0.20857,-1.66856 -1.67767,-3.914582 -2.26785,-5.291667 -1.31737,-3.073852 -2.17167,-10.487141 -4.53572,-12.85119 -0.17818,-0.178181 -0.57777,0.178178 -0.75595,0 -5.238481,-5.238483 5.96405,4.452138 -2.267856,-3.779764 C 99.143276,42.44685 98.09949,42.275341 97.517856,41.577381 96.796428,40.711667 96.748025,39.401654 96.00595,38.553572 92.805532,34.895951 88.554636,32.18208 84.666666,30.238094 79.940908,27.875216 71.601631,49.142956 71.059523,50.648809 c -6.440503,17.890283 -10.594459,36.186696 -15.875,54.428571 -2.92605,10.10818 -6.393354,20.06141 -9.071429,30.23809 -5.029446,19.1119 -0.242301,3.72168 -3.02381,20.41072 -0.262001,1.572 -1.226817,2.96773 -1.511903,4.53571 -0.306721,1.68697 0,4.18411 0,6.04762' stroke='black' fill='transparent' stroke-width='2' />
</svg>"
)
グラデーション
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<defs>
<linearGradient id='atg' gradientUnits='objectBoundingBox' x1='0' y1='50%' x2='100%' y2='50%'>
<stop offset='0%' stop-color='red'/>
<stop offset='50%' stop-color='white'/>
<stop offset='100%' stop-color='red'/>
<animateTransform attributeName='gradientTransform' type='rotate' from='0,0.5,0.5' to='360,0.5,0.5' begin='0s' dur='6s' repeatCount='indefinite'/>
</linearGradient>
<pattern id='atp' patternUnits='userSpaceOnUse' x='0' y='0' width='50' height='50'>
<rect x='0' y='0' width='50' height='50' fill='yellow'/>
<circle cx='25' cy='25' r='25' fill='orange'/>
<animateTransform attributeName='patternTransform' type='translate' from='0,0' to='100,100' begin='0s' dur='6s' repeatCount='indefinite'/>
</pattern>
</defs>
<rect x='5%' y='5%' width='90%' height='90%' fill='url(#atg)' stroke='url(#atp)' stroke-width='10%'/>
</svg>"
)
NEXT ボタン
NEXT
"data:image/svg+xml,"&
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<defs>
<filter id='shadow'>
<feDropShadow dx='10' dy='2' stdDeviation='2'/>
</filter>
</defs>
<path stroke='black' stroke-width='2' fill='lightpink'>
<animate attributeName='d'
calcMode='linear'
from='M 40 35 L 40 60 L 120 60 L 120 85 L 160 50 L 120 15 L 120 35 L 40 35'
to='M 30 30 L 30 75 L 130 75 L 130 95 L 180 50 L 130 5 L 130 30 L 30 30'
begin='0s'
dur='0.5s'
repeatCount='indefinite'/>
</path>
<text font-family='Algerian' stroke-width='0.3' stroke='#0022e0ff' fill='#18eee0ff' filter='url(#shadow)' >
NEXT
<animate attributeName='font-size'
calcMode='linear'
from='30'
to='40'
begin='0s'
dur='0.5s'
repeatCount='indefinite'/>
<animate attributeName='x'
calcMode='linear'
from='50'
to='40'
begin='0s'
dur='0.5s'
repeatCount='indefinite'/>
<animate attributeName='y'
calcMode='linear'
from='60'
to='65'
begin='0s'
dur='0.5s'
repeatCount='indefinite'/>
</text>
</svg>"
)
