swfz https://blog.hatena.ne.jp/swfz/ notebook https://swfz.hatenablog.com/ React svg よく見る「～～ジェネレータ」など いくつかフォームの値を利用して動的にSVGを生成するといったようなことをやってみたいなと思い立ったのでやってみた あまり知らなかったので学んだことをつらつら書いていく 以降Reactでインライン埋め込みしてレンダリングしているためタグの属性名にハイフンが入っている場合はキャメルケースにしている 図形を描画する SVGのタグは全然知らなかったのでとりあえず下記参考にしてpolygon使うことにした SVGの基本(使い方, 主な図形, CSSでスタイルづけ) - わくわくBank www.wakuwakubank.com 各種指定する pointsで頂点の座標 s… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fswfz.hatenablog.com%2Fentry%2F2023%2F01%2F21%2F062708" title="SVGで図形を再利用する - notebook" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/s/swfz/20230121/20230121061429.png Hatena Blog https://hatena.blog 2023-01-21 06:27:08 rich https://swfz.hatenablog.com/entry/2023/01/21/062708 1.0 100%