Card d3.js

by kontrach

CSS

body {
  background-color: #EDEDED;
}

.myClass {
  fill: white;  
}

.text {
  	color: #474747;
    font-family: "Fira Sans";	
    font-size: 13px;	
    line-height: 20px;
}

.thin {
  font-weight: 200;
}

JavaScript

const cardDimensions = {
	width: 200,
  height: 50,
};

const svgContainer = d3.select("body").append("svg")
  .attr("width", cardDimensions.width)
  .attr("height", 200);

const rectangle = svgContainer.append("rect")
   .attr("x", 0)
   .attr("y", 0)
   .attr("width", cardDimensions.width)
   .attr("height", 50)
   .attr("class", "myClass");
   
var path = document.querySelector('.myClass');
var length = path.getTotalLength();

console.log(length,"-----------");
   
const leftBorder = svgContainer.append("rect")
   .attr("x", 0)
   .attr("y", 0)
   .attr("width", 4)
   .attr("height", 50)
   .style("fill", "#940C72");
   
const borderButtom = svgContainer.append("rect")
   .attr("x", 0)
   .attr("y", 50)
   .attr("width", 20)
   .attr("height", 2)
   .style("fill", "#940C72");
   
const line = svgContainer.append("rect")
   .attr("x", 20)
   .attr("y", 50)
   .attr("width", 1)
   .attr("height", 50)
   .style("fill", "#940C72");
   
   
const  text= svgContainer.append("text")
   .attr("x",20)
   .attr("y",20)
   .text("Gutachten Photovoltaik…")
   .attr("class", "text");
   
const date = svgContainer.append("text")
   .attr("x",20)
   .attr("y",40)
   .text("13.03.2018")
   .attr("class", "text thin");
   
const info = svgContainer.append("text")
   .attr("x",100)
   .attr("y",40)
   .text("Information")
   .attr("class", "text thin");