排版的某些部分（字母）会对窗口的宽度/高度做出响应吗？

Question

我不确定这样的事情是否可以通过CSS实现，但是这个社区中有才华的人再次证明我错了很多次，所以我们走了！

我想知道字母的某些水平部分是否可能 O ， U ， E 可以用窗口响应宽度同时保持其位置？在下图中，我已经了解了响应式排版对窗口比例的反应。请注意，设置类型放在页面包装中，并垂直放置在窗口的中间。

我怎么能做到这一点？我应该使用什么格式（svg，形状等）

提前谢谢！

Answer 1

你可以简单地通过在div中将重叠元素放在overflow：hidden：扩展字母形状用SVG创建，并隐藏在左手div之下。当用户调整窗口大小时，右侧div滑出，露出细长部分。例如

<div id="clipper">
 <svg id="leftpart" x="0px" y="0px" width="30px" height="150px">
  <rect x="0" y="0" width="30" height="150" fill="red"/>
 </svg>

 <svg id="rightpart" x="0px" y="0px" width="2000px" height="150px">

     <rect  x="0" y="0" width="2000" height="30" fill="black"/>
     <rect  x="0" y="60" width="2000" height="30" fill="black"/>
     <rect  x="0" y="120" width="2000" height="30" fill="black"/>
 </svg> 
</div>


#clipper{
  position: absolute;
  top:200px;
  left:200px;
  width:40%;
  overflow: hidden;

}

#rightpart {
  position: relative;
  z-index:1;
}

#leftpart {
  position: absolute;
  z-index:2;

}

Answer 2

以下是基于屏幕宽度缩放SVG元素的示例。这将取决于有一种方法来选择你想要修改的字符元素（例如，U的碗的底部）。在此示例中，矩形元素具有唯一ID。

HTML：

<svg version="1.1"
     baseProfile="full"
     width="200" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect id="foo" height="100" width="100" />

</svg>

CSS：

#foo {
    fill: #f00;
    transform: scaleX(0.5);
}

@media only screen and (min-width: 500px) {
    #foo {
        transform: scaleX(2);
    }
}

http://jsfiddle.net/bangarang/tgcw1fop/