在d3 svg中对齐文本

var svg = d3.select("#footer")
    .append("svg:svg")
    .attr("width", 300)//canvasWidth)
    .attr("height", 20);
		
var defs = svg.append("defs");

var linearGradient = defs.append("linearGradient")
    .attr("id", "linear-gradient");

linearGradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", "#ffa474"); 

linearGradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#8b0000");

svg.append("rect")
    .attr("width", 300)
    .attr("height", 20)
    .style("fill", "url(#linear-gradient)");
		
svg.append("text")
	.attr("text-anchor", "start")
	.attr("x", 4)
	.attr("y", 14)
	.text("a");
	
svg.append("text")
	.attr("text-anchor", "end")
	.attr("x", 296)
	.attr("y", 14)
	.text("b");

#footer {
      position: absolute;
      z-index: 10;
      bottom: 10px;
      left: 50%;
      width: 300px;
      margin-left: -150px;
      height: 20px;
      border: 2px solid black;
      background: rgba(12, 12, 12, 0.8);
      color: #eee;
    }

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="footer"></div>