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>