知っておくと得をする(かもしれない) SVGの基礎とviewBox

CSSの transform-box プロパティの挙動をよりよく知るためのSVGの座標系の説明です。

実際のスライドはアニメーションが多用されているので、詳しくはこちらのアーカイブ動画をご覧ください。
https://www.youtube.com/watch?v=nxiTyhe42gU

Transcript

1. ஌͓ͬͯ͘ͱಘΛ͢Δʢ͔΋͠Εͳ͍ʣ
 SVGͷجૅͱviewBox 冋榹泡嘻 Basics & viewBox
2. দ ా ௚ थ CCO, Designer
3. SVG in various places ͜Μͳͱ͜ΖʹSVG
4. https://lottiefiles.com/featured https://airbnb.io/lottie/
5. http://flowingdata.com/2015/12/15/a-day-in-the-life-of-americans/
6. https://vdata.nikkei.com/newsgraphics/presidential-election2020/kaihyo/
7. Color Fonts ʢEmojiʣ SVG COLR CBDT SBIX Vector Vector Bitmap Bitmap
8. https://webdesk.jsa.or.jp/books/W11M0090/index/?bunsyo_id=JIS+X+7197%3A2012
9. Features SVGͷجຊతͳಛ௃
10. XMLจॻͰ͋Δ จࣈ৘ใΛ಺แ ը૾ͷத਎ΛΞΫηγϒϧʹͰ͖Δ <circle cx="20" …> <title> Duck’s eye </title> </circle> ͢΂͕ͯཁૉʢDOMʣ CSS΍Web Fonts΋ద༻Ͱ͖Δ <circle> <path> <path> ࠶ར༻ੑ SVG Sprites΋͜ͷํ๏
11. Standalone SVG HTML CSS SVG ֎෦ϑΝΠϧΛը૾ͱͯ͠දࣔͤ͞Δ HTML <svg> </svg> inline SVG HTMLͷதʹɺSVGίʔυΛ௚઀ॻ͘ HTML಺ʹSVGίʔυΛ௚઀ؚΊΔ͜ͱ͕Ͱ͖Δ CSS HTML
12. ΞΫηγϒϧʹͰ͖Δʢ͕Μ͹Ε͹ʣ UJUMF
    ־׼ד
    UJUMF UJUMF
    泘
    UJUMF UJUMF
    ׂהף׊
    UJUMF
13. viewBoxʢ࠲ඪܥʣͷ֓೦ width / height ࣮ੇͷαΠζࢦఆ preserveAspectRatio ΞεϖΫτൺอ࣋ํ๏ͷࢦఆ viewBox ඳըྖҬͷ࠲ඪܥΛఆٛ
14. filter, mask, pattern…ɹඇഁյͳޮՌ
15. Ξχϝʔγϣϯ࣮૷ํ๏͕๛෋ JavaScript ͳΜͰ΋Ͱ͖Δ var tl = new TimelineMax(); tl.fromTo('#obj', 3, {y: '0'}, {y: ’10', repeat: -1, yoyo: true}, '-=2') SMIL ཁૉ͚ͩͰΞχϝʔγϣϯ <circle cx="20" …> <animate attributeName="cx" from="100" to="100" dur="5s" … /> </circle> CSS Animations CSSͷΞχϝʔγϣϯ΋࢖͑Δ @keyframes stroke-anime { 0% { stroke-dashoffset: 800; fill: transparent; } 100% { stroke-dashoffset: 0; fill: rgba(#fff, .7); } }
16. ίετύϑΥʔϚϯε ଱ٱੑ σβΠϯ ಠࣗੑ Custom Fields 3 6 3 4 σʔλͱ૬ੑྑ͠ ίετύϑΥʔϚϯε ଱ٱੑ σβΠϯ ಠࣗੑ ࡏݿ
17. SVG in WordPress SVGͱWordPress
18. WordPressͷϝσΟΞͰ͸
 SVGϑΝΠϧΛΞοϓϩʔυͰ͖ͳ͍
19. ͳΜͰʁ
20. ͜ͷϑΝΠϧλΠϓ͸ηΩϡϦςΟ্ͷཧ༝͔Βɺ
 ڐՄ͞Ε͍ͯ·ͤΜ ʯ ʮ
21. SVG͸XMLίʔυɻ
 ѱҙͷ͋ΔJSΛ͍͘ΒͰ΋ຒΊࠐΊͯ͠·͏
22. <svg width="142" height="142" viewBox="0 0 142 142" xmlns="http://www.w3.org/2000/svg"> <script> window.alert(" !!!!!!!! "); </script> <rect width="142" height="142" fill="#C4C4C4"/> </svg>
23. <?php function permit_mimes( $mimes ) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'permit_mimes'); ?>
24. <?php function permit_mimes( $mimes ) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'permit_mimes'); ?>
25. HTML <img> HTML <object> <embed> <iframe> CSS bacground HTML5 inline SVG top-level
 document embedded
 document static image document animated image document font document Web Fonts mask, pattern … resource document https://svgwg.org/specs/integration/#referencing-modes
26. ୭΋͕ΦϖϨʔλʔͱͳΓ͏Δ
 WordPressͷ
 ͜ͷબ୒͸ਖ਼͍͠ʢͱࢥ͏ʣ
27. https://ja.wordpress.org/plugins/safe-svg/
28. ςϯϓϨʔτ಺Ͱ
 SVGΛ࢖ͬͯΑΓྑ͍දݱΛ
29. https://xdtrail.com/
30. Protoyping Extension Design System Share UI
31. $chart_point_data = [ 'ui-design' => ['380 186', '380 122', '380 58' ], 'prototyping' => ['448 235', '508 216', '569 196'], 'share' => ['422 314', '460 367', '497 419'], 'design-system' => ['339 314', '301 367', '264 419'], 'extensibility' => ['313 235', '253 216', '192 196'] ];
32. $chart_point_data = [ 'ui-design' => ['380 186', '380 122', '380 58' ], 'prototyping' => ['448 235', '508 216', '569 196'], 'share' => ['422 314', '460 367', '497 419'], 'design-system' => ['339 314', '301 367', '264 419'], 'extensibility' => ['313 235', '253 216', '192 196'] ]; Protoyping Extension Design System Share UI 1 1 0 0 0
33. X: 380 Y: 122
34. <polygon points="380 186 448 235 422 314 339 314 313 235" fill="#e506b1" opacity="0.6"> <animate attributeName="points" begin="indefinite" dur="1s" to=" 380 122 508 216 422 314 339 314 313 235" repeatCount="0" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.25 0.1 0.25 1.0" class="- animated"></animate> </polygon> 1 1 0 0 0
35. SVG͸࠲ඪͰͰ͖͍ͯΔ
36. https://d3js.org/
37. About viewBox & viewport SVGͷviewBoxͱϏϡʔϙʔτͱ͸
38. viewBoxͱ࠲ඪܥ
39. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200" > <circle cx="100" cy="100" r="100"/> </svg>
41. viewBox= 
 "0 0 200 200" a b c d (a, b) c d
42. viewBox ଐੑͰ
 SVGͷදࣔൣғ͓Αͼར༻࠲ඪܥΛఆٛ͢Δ
43. viewBox="100 0 100 100" viewBox="0 0 200 200"
44. viewBox="0 0 200 200" 1 0,0 2 3 200 ............................... 2 3 200 1 ...............................
45. 1 2 3 200 ............................... 2 3 200 1 ............................... viewBox="0 0 200 200" <line x1="0" y1="0" x2="200" y2="100" stroke="#fff" /> 0,0 200,100
46. ࠲ඪ 1 × 1 = ར༻୯Ґ
47. viewBoxʹΑΔ࠲ඪܥ͸ೖΕࢠʹͰ͖Δ
48. Ұํɺ
 SVGͷϏϡʔϙʔτͱ͸
49. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px" viewBox="0 0 200 200" > <circle cx="100" cy="100" r="100"/> </svg>
50. viewBox="0 0 200 200" viewBox="0 0 200 200" width="200px" height="200px" width="100px" height="100px"
51. Ϗϡʔϙʔτ͸
 εΫϦʔϯʹ͓͚ΔදࣔαΠζ
52. viewBox="0 0 200 200" width="200px" height="200px" viewBoxʹΑΔར༻࠲ඪܥͱ
 Ϗϡʔϙʔτ࠲ඪܥ͸
 ͓ޓ͍ʹӨڹ͠߹Θͳ͍
53. viewBoxͱ
 width, hightʢϏϡʔϙʔτʣͷ
 ૊Έ߹Θͤͷڍಈ
54. viewBoxɹ͋Γɹ/ɹwidth, hightʢϏϡʔϙʔτ)ɹ͋Γ viewBox="0 0 200 200" width="100%" height="100%"
55. viewBoxɹͳ͠ɹ/ɹwidth, hightʢϏϡʔϙʔτ)ɹ͋Γ viewBox="0 0 200 200" width="100%" height="100%"
56. viewBoxɹ͋Γ
 width, hightʢϏϡʔϙʔτ)ɹ͋Γ viewBoxɹͳ͠
 width, hightʢϏϡʔϙʔτ)ɹ͋Γ or ͳ͠ viewBoxʹΑΓɺͦͷSVGઐ༻ͷ
 ར༻࠲ඪܥ͕͋Δ Ϗϡʔϙʔτ࠲ඪܥʢHTMLͷ࠲ඪܥʣ͕
 ॳظ࠲ඪܥʹͳΔ
57. viewBoxɹ͋Γ
 width.hightʢϏϡʔϙʔτ)ɹ͋Γ viewBoxɹͳ͠
 width.hightʢϏϡʔϙʔτ)ɹ͋Γ 1ར༻୯Ґ 1ར༻୯Ґ ϏϡʔϙʔταΠζʹΑΓՄม HTMLͷ1px = =
58. viewBoxͷڍಈΛ஌͓ͬͯ͘ͱ
 දݱͷ෯͕૿͑Δ
60. WP
 ZoomUp Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
61. SVG͸࠲ඪͰͰ͖͍ͯΔ
62. Coordinate transformations ࠲ඪͷม׵
63. SVG͸Ξχϝʔγϣϯ͍ͤͨ͞
64. ࠲ඪܥͱtransform
65. <rect x="50" y="50" width="100" height="100" transform="translate(50, 50)" />
66. ͦ͏͡Όͳͯ͘ɺ͜͏ͳΔ
67. <rect x="50" y="50" width="100" height="100" transform="translate(50, 50)" />
68. transform ʹΑͬͯ
 ৽ͨͳར༻࠲ඪܥʹม׵͞ΕΔ ཁૉࣗମ͕Ҡಈ΍มܗ͍ͯ͠ΔͷͰ͸ͳ͘ɺ
 ࠲ඪܥͦͷ΋ͷ͕Ҡಈɾมܗ্ͨ͠Ͱཁૉ͕ඳը͞ΕΔ
69. transform="rotate(360)"
70. ͦ͏͡Όͳͯ͘ɺ͜͏ͳΔ
71. 0,0 ճస΋ɺཁૉج४Ͱ͸ͳ͘ɺ৽ͨͳ࠲ඪܥͷ 0,0 ج४ transform="rotate(360)"
72. transform ʹΑͬͯɺ৽ͨͳ࠲ඪܥ͝ͱҠಈɾมܗ͓ͯ͠Γɺ
 ͦͷ 0,0 ͷ࠲ඪ͕ج४ͱͳΔ 0,0
73. SVG಺ͷ֤ཁૉΛج४ʹಈ͔͢ʹ͸
 Ͳ͏͢Ε͹͍͍ͷ͔ʁ
74. transform-origin
 ࢖͑͹͍͍Μ͡Όͳ͍ͷʁ
75. rect { transform-origin: 50% 50%; }
76. ͦ͏͡Όͳͯ͘ɺ͜͏ͳΔ
77. rect { transform-origin: 50% 50%; } 50% 50%
78. 100% 100% 0% 0% transform-origin ΋ɺར༻࠲ඪܥશମ͕ج४ 50% 50%
79. ͳͷͰ
 ճసͷج४ͱ͍ͨ͠࠲ඪΛઈର஋ࢦఆ͢Δ
80. rect { transform-origin: 150px 150px; } 150,150 150 150
81. खΛৼΔΞχϝʔγϣϯʹ͍ͨ͠ ࿹ͷ෇͚ࠜΛ
 ج४ʹ͍ͨ͠
82. #arm { transform-origin: 283px 196px; } NG GOOD 0,0 283,196
83. #arm { transform-origin: right bottom; } NG GOOD #arm { transform-origin: 283px 196px; }
84. ͪͳΈʹ
85. #arm { transform-origin: 283px 196px; } ňpxʯ͕͍͍ͭͯΔ͕ɺ
 SVGͷ࠲ඪܥͷར༻୯Ґѻ͍ width: 50px; height: 50px; Ͱ΋ɺ transform-origin: 283px 196px; ϏϡʔϙʔτͷαΠζͱ͸ແؔ܎
86. ͞Βʹ༨ஊ
87. transform="rotate(360, 150, 150)" 150 150
88. ͍͍ͪͪ࠲ඪΛਤΔͷ໘౗…
89. େৎ෉ɻԶͨͪʹ͸
90. transform-box ϓϩύςΟ͕͋Δ
91. rect { transform-origin: 150px 150px; }
92. rect { transform-origin: 150px 150px; transform: rotate(360deg) }
93. rect { transform-origin: 150px 150px; transform: rotate(360deg) } rect { transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(360deg) } =
94. rect { transform-origin: 150px 150px; transform: rotate(360deg) } rect { transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(360deg) } =
95. transform-box: fill-box; transform-origin: 50% 50%; ͜ͷࢦఆʹΑΓɺSVGͰ΋ಛఆཁૉͷਅΜதΛ transformͷج४ʹͰ͖Δ
96. transform-box: view-box; transform-box: fill-box; SVGͷར༻࠲ඪܥΛtransformͷର৅ͱ͢Δ ࢦఆཁૉͷృΓൣғΛtransformର৅ͱ͢Δ
97. rect { transform-box: fill-box; transform-origin: 50% 50%; }
99. transform-box
100. ͜ͷϓϩύςΟΛ঺հ͍͕ͨͨ͠Ί͚ͩʹ
 1͍͖࣌ؒͨͩ·ͨ͠ transform-box
101. ͋Γ͕ͱ͏͍͟͝·ͨ͠ 冋榹泡嘻 Basics & viewBox