くりーむわーかー

プログラムとか。作ってて ・試しててハマった事など。誰かのお役に立てば幸いかと。 その他、いろいろエトセトラ。。。

svg

CSS background-imageの画像を直接CSSにデータとして埋める

タイトル通り。って何言ってんの感じのタイトルですが。

例えば、jsFidlleとかでちょっと試したい時。

手持ちのアイコン画像なんかを背景画像で指定して使おうとすると、

リソースはURL指定しかできないので困る。

そういう時に背景画像をCSS側にBase64でエンコードして埋め込める。

↓こういう事。

SVGのこういうデータを例えばこういうサイトでエンコードして、CSSに上記の感じで埋め込んであげればjsfidleでも画像の埋め込みが出来るというわけです。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>icon-select-expand</title>
  <polyline points="17 9.5 12 14.5 7 9.5" style="fill: none;stroke: #717070;stroke-miterlimit: 10"/>
</svg>

地味に便利。。。

d3でSVG

d3使ってSVGを追加する時のメモ。

・ 一括で追加する

下の感じ。
var dataset = [10,5,15];
var svg = d3.select("body")
	.append("svg")	
	.attr("width",500)
	.attr("height",500);

svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x",5)
	.attr("y",function(d,i){return i*42;})
	.attr("width",50)
	.attr("height",function(d,i){return 40;});

・ 一括で追加のを2回に分けてやる

下の感じ。
var dataset = [10,5,15];
var svg = d3.select("body")
	.append("svg")	
	.attr("width",500)
	.attr("height",500);

svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x",5)
	.attr("y",function(d,i){return i*42;})
	.attr("width",50)
	.attr("height",function(d,i){return 40;});

svg.selectAll("rect2")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x",5)
	.attr("y",function(d,i){return i*42;})
	.attr("width",50)
	.attr("height",function(d,i){return 40;});

よく分からないけど、足したい時はselectAllで持ってくる要素を空振りさせるようにしないと上手くいかない。
問合せ