Fork
0
Fav
0
View
379
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 0 lines
  • HTML 15 lines
  • CSS 16 lines
symbol要素にforeignObject要素を使ってHTMLを挿入
HTMLにはCSSの::before/::after疑似要素にcontentプロパティを指定することで文字列を外部から指定可能とする
その際にCSS variablesを使ってカスタムプロパティをuse要素経由で流し込む

と、あら不思議
テンプレート構造を維持しつつ, use要素に対してスタイルを指定するだけでテキストを挿入することが可能となる!

NOTE:
むかしはuse要素がforeignObject要素を許容しなかったのでうまく行かなかった
  • SVGのsymbol要素にHTMLを介してCSSで文字列を挿入する
  • SVGのsymbol要素にHTMLを介してCSSで文字列を挿入する

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

defghi1977

Author

svgはいんすぴれーしょん http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm 重箱の隅っこをつっついて,にんまり. ドキュメントにまとめて,にっこり.

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags