知っておくと得をする(かもしれない)SVGの基礎とviewBox！ WP ZoomUP #58 に関する呟きあれこれ
-
- いいね！0
WP ZoomUP
@WPZoomUP
SVGをHTMLのimg要素として表示した場合はスクリプトは実行されない。 ※ パスを調べたりしてSVGをブラウザで直接開いたりすると実行されちゃう。 #WPZoomUP
2021-02-12 21:34:26
長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro
@hiro_ghap1
Safe SVG って scriptタグを除去してくれるんだ。 #WPZoomUP
2021-02-12 21:37:32
森和恵🎧r360studio
@r360studio
SVGの viewBox の概念って、個人的には躓きポイントだったな。くわしく解説してくれてわかりやすい✨ #WPZoomUP
2021-02-12 21:43:10
WP ZoomUP
@WPZoomUP
viewBoxの挙動を知っておくと便利に使える #WPZoomUP pic.twitter.com/thnUJG47Bn
2021-02-12 21:44:47
拡大
木綿
@sakoengineer
SVG、今までなんとなくしか使ったことがなくて、ずっと勉強しようと思っていたんだけど、 めちゃくちゃ分かりやすい！ #WPZoomUP
2021-02-12 21:50:51
WP ZoomUP
@WPZoomUP
今回スポンサーCMタイムはプロモーションムービーがある…！ #WPZoomUP #wpnishiki pic.twitter.com/0D9GDi2nQx
2021-02-12 21:54:40
拡大
森和恵🎧r360studio
@r360studio
#wpnishiki のプロモ🎥が流れてる。 Nishiki Pro テーマ、うちのサイトで使っています。カスタマイズの項目が多くて便利なの。 #WPZoomUP pic.twitter.com/ZOsN2PQdLS
2021-02-12 21:56:17
拡大
拡大
拡大
WP ZoomUP
@WPZoomUP
Nishiki Pro使ってみてください！そしてムービーの感想、お待ちしてます！とのことです。ありがとうございますー！！ support.animagate.com/product/wp-nis… #WPZoomUP #wpnishiki pic.twitter.com/FM4jrHf6xh
2021-02-12 22:01:44
拡大
拡大
拡大
拡大
森和恵🎧r360studio
@r360studio
さっきの、メロウでカッコイイ、CMはこちらですね。 #wpnishiki #WPZoomUP youtu.be/WL9IozolBXM
2021-02-12 22:01:48
Imamura
@s56bouya
先ほど #WPZoomUP の CM タイムで発表した Nishiki Pro テーマのプロモーション動画を YouTube にアップしました！ ぜひぜひ見てください🙏 感想は #wpnishki つけてお寄せくださいますと嬉しいです！ youtube.com/watch?v=WL9Ioz…
2021-02-12 22:07:11
な
@ud_fibonacci
スポンサー Nishiki Pro 様のプロ様のプロモーション動画！ 映画CMのようです😭✨✨✨ youtu.be/WL9IozolBXM #WPZoomUP #wpnishiki
2021-02-12 22:08:27
森和恵🎧r360studio
@r360studio
SVG の transform の利用座標系のお話。 昔のゲームのスプライトみたいな感覚かなぁ。 #WPZoomUP
2021-02-12 22:11:58
WP ZoomUP
@WPZoomUP
transformをかけたとき、HTMLの要素の場合とSVGの座標系に対しての場合挙動が違う。SVGは新たな座標系ごと移動・変形する。 #WPZoomUP
2021-02-12 22:12:03
森和恵🎧r360studio
@r360studio
transform-origin で動かしたい要素の原点を指定することもできるのね。 transform との違い。 #WPZoomUP
2021-02-12 22:15:02
森和恵🎧r360studio
@r360studio
面倒だなと思った心を読まれたかのように紹介される transform-box！ #WPZoomUP developer.mozilla.org/ja/docs/Web/CS…
2021-02-12 22:23:54
WP ZoomUP
@WPZoomUP
CSSのtransform-boxプロパティを使えばtransform-origineに相対値を使える…！※IEは対応していません。 #WPZoomUP
2021-02-12 22:24:25