blog
copyright ©
creamu Inc. All Rights Reserved.
art direction & design: Kunitaka Kawashimo
code, interaction & photography: creamu Inc.
category: Technology

svgのpolygon, polylineをpathに変換する方法

Pocket

svgの線/塗り(stroke / fill)のアニメーションをしたい場合、パスにする必要があり、ポリゴン/ポリラインだとうまくいきません。polygon, polylineをpathに変換するには、以下サイトから行います。

Convert SVG Polygon to Path

HTMLにsvgタグをペーストして、下の空白の部分をクリックし、Chromeデベロッパーツールでsvgタグをコピーして使用します。


Warning: A non-numeric value encountered in /home/users/1/creamuinc/web/creamu.co.jp/wp/wp-content/plugins/wp-social-bookmarking-light/vendor/twig/twig/lib/Twig/Environment.php(462) : eval()'d code on line 43

Warning: A non-numeric value encountered in /home/users/1/creamuinc/web/creamu.co.jp/wp/wp-content/plugins/wp-social-bookmarking-light/vendor/twig/twig/lib/Twig/Environment.php(462) : eval()'d code on line 43

Warning: A non-numeric value encountered in /home/users/1/creamuinc/web/creamu.co.jp/wp/wp-content/plugins/wp-social-bookmarking-light/vendor/twig/twig/lib/Twig/Environment.php(462) : eval()'d code on line 43