Skip to content

Instantly share code, notes, and snippets.

@luluwuluying
Created February 8, 2016 19:13
Show Gist options
  • Save luluwuluying/b1ed7de4c1c99df60292 to your computer and use it in GitHub Desktop.
Save luluwuluying/b1ed7de4c1c99df60292 to your computer and use it in GitHub Desktop.
Week 4: SVG fixes
<html lang="en">
<head>
<meta charset="utf-8">
<title>SVG Shapes</title>
</head>
<body>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<rect id="svg_1" height="49" width="68" y="103" x="110" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<rect id="svg_2" height="70" width="107" y="103" x="214" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<rect id="svg_3" height="53" width="76" y="103" x="371" stroke-width="5" stroke="#000000" fill="#007f7f"/>
<ellipse ry="50" rx="71" id="svg_4" cy="269" cx="88" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse ry="29" rx="9" id="svg_5" cy="345" cx="201" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse ry="15" rx="61" id="svg_6" cy="362" cx="280" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse ry="27" rx="46" id="svg_7" cy="355" cx="445" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse rx="61" id="svg_8" cy="267" cx="510" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse ry="57" rx="22" id="svg_9" cy="242" cx="354" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse ry="38" rx="63" id="svg_10" cy="234" cx="287" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse ry="7" rx="35" id="svg_11" cy="229" cx="463" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse ry="10.5" rx="13" id="svg_12" cy="330.5" cx="373" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse ry="40" rx="51" id="svg_13" cy="278" cx="223" stroke-width="5" stroke="#000000" fill="#00ff7f"/>
<line id="svg_14" y2="157" x2="525" y1="65" x1="388" stroke="#000000" fill="none"/>
<line id="svg_15" y2="181" x2="607" y1="71" x1="537" stroke="#000000" fill="none"/>
<line id="svg_16" y2="338" x2="621" y1="261" x1="602" stroke="#000000" fill="none"/>
<line id="svg_17" y2="278" x2="431" y1="264" x1="534" stroke="#000000" fill="none"/>
<line id="svg_18" y2="294" x2="583" y1="191" x1="511" stroke="#000000" fill="none"/>
<line id="svg_19" y2="407" x2="555" y1="339" x1="575" stroke="#000000" fill="none"/>
<line id="svg_20" y2="430" x2="645" y1="415" x1="594" stroke="#000000" fill="none"/>
<line id="svg_21" y2="434" x2="232" y1="447" x1="453" stroke="#000000" fill="none"/>
<line id="svg_22" y2="437" x2="108" y1="400" x1="143" stroke="#000000" fill="none"/>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_28" y="31" x="339" stroke-width="0" stroke="#000000" fill="#000000">This is a total mess. Help.</text>
</g>
</svg>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript">
d3.selectAll("rect").attr("stroke-width","2px")
d3.selectAll("ellipse").attr("fill","blue")
d3.selectAll("rect").attr("fill","pink")
d3.select("#svg_1").attr("fill","blue")
d3.selectAll("#svg_2").attr("stroke","orange")
d3.select("svg").style("background-color","#D8D8D8")
d3.selectAll("line").attr("stroke-width","3px")
var linecolor=d3.scale.category10();
d3.selectAll("line").style("stroke",function(d,i){
return linecolor(i);
});
d3.select("text").remove()
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment