有没有一种方法可以保持文本而不是其他svg元素的纵横比？

我有一个由rects组成的d3.js图形，我希望这可以根据任何宽高比调整大小。我已通过添加此代码来完成此工作：有没有一种方法可以保持文本而不是其他svg元素的纵横比？

var canvas = d3.select("#graph-canvas").append("svg:svg") 
     .attr("viewBox", "0 0 " + viewWidth + " " + viewHeight) 
     .attr("preserveAspectRatio", "none")

但是，我遇到的问题是我不希望文本随它一起拉伸。我实际上喜欢文本的大小保持不变，而位置会根据图表的尺寸进行调整。但是，如果文本不能保持恒定大小，我希望它至少保持其纵横比。

我试过设置文本元素的宽高比，但这并不工作（我认为这是一个属性意味着视框。

canvas.append("svg:text") 
     .attr("x", function(d, i) {return xScale(i) + marginLeft;}) 
     .attr("y", "200") 
     .attr("preserveAspectRatio", "xMinYMin") 
     .attr("font-size", "100") 
     .text("foo");

我也尝试安装只是正常的div ，但由于某些原因，他们从来没有露面..想这可能是正确的策略，虽然

来源

2012-01-20 Jeremy Smith

像这样的事情

演示：？http://jsfiddle.net/g8Ms6/

<svg 
    version="1.1" xmlns="http://www.w3.org/2000/svg" 
    width="100%" height="100%"> 

    <rect 
     x="10%" y="10%" 
     width="80%" height="80%" 
     stroke="black" stroke-width="1" 
     fill="transparent"/> 

    <svg 
     x="10%" y="10%" 
     width="80%" height="80%" 
     viewBox="0 0 100 100" preserveAspectRatio="none"> 

     <rect x="20" y="15" width="30" height="20" fill="blue"/> 
    </svg> 

    <text 
     x="90%" y="90%" 
     font-size="20px" fill="#000" 
     transform="translate(-50, 20)"> 
     Foo 
    </text> 
</svg>

来源

2012-01-21 02:33:22 bennedich

有没有一种方法可以保持文本而不是其他svg元素的纵横比？

回答

相关问题