SVG实现文字大小跟随容器自动变化实例页面

回到相关文章 »

效果：

CSS世界这本书不错！

代码：

CSS代码：
.container {
    width: 400px;
    overflow: hidden;
    resize: both;    
}
.container > svg {
    width: 100%;
}
HTML代码：
<div class="container">
    <svg width="600" height="80" viewBox="0 0 600 80">
        <text font-family="'Helvetica Neue','PingFang SC','microsoft yahei'" font-size="60" x="0" y="1em">CSS世界这本书不错！</text>
    </svg>
</div>