I'm experimenting with creating a design similar to the following SVG code snippet:
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example rect02 - rounded rectangles</desc>
<rect x="100" y="100" width="400" height="200" rx="50"
fill="green" />
<g transform="translate(700 210) rotate(-30)">
<rect x="0" y="0" width="400" height="200" rx="50"
fill="none" stroke="purple" stroke-width="30" />
</g>
</svg>
I aim to achieve a result like the image below using this CoffeeScript snippet:
canvas = d3.select("body")
.append("svg")
.attr("width",2600)
.attr("height",2600)
rect1 = canvas.append("rect")
.attr("width",400)
.attr("height",200)
.attr("x",100)
.attr("y",100)
.attr("rx",50)
.attr("fill","green")
rect2 = canvas.append("rect")
.attr("width",400)
.attr("height",200)
.attr("x",650)
.attr("y",50)
.attr("rx",50)
.attr("fill","none")
.attr("stroke-width",30)
.attr("stroke","Indigo")
.append("g")
.attr("transform","translate(700 200) rotate(-30)")
I encountered an issue while trying to rotate the "Indigo" rectangle using the "g" element, resulting in an unexpected output.
If you have any suggestions or tips on working with CoffeeScript and D3, I would greatly appreciate it.
Thank you!