svg viewBox

最新推荐文章于 2024-09-08 21:10:04 发布

螺旋铭

最新推荐文章于 2024-09-08 21:10:04 发布

阅读量584

点赞数

分类专栏： SVG 文章标签： SVG viewBox 为视口指定用户坐标

本文链接：https://blog.csdn.net/xm_law/article/details/100115441

版权

SVG 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

viewBox可以为视口指定用户坐标
例如：要在4厘米X5厘米的图纸上设置一个每厘米16个单位的坐标系统，要使用这个开始标记：viewBox(0 0 4*16 5*16),它分别代表想要叠加在视口上的用户坐标系统的最小x坐标，最小y坐标，宽度和高度，后者数值越大图像会缩放得越小

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="4cm" height="5cm" viewBox="0 0 64 80">
   <rect x="10" y="35" width="40" height="40" stroke="black" fill="none"></rect>
   <!-- 房顶 -->
   <polyline points="10 35,30 7.68,50 35" stroke="black" fill="none"></polyline>
   <!-- 房门 -->
   <polyline points="30 75,30 55,40 55,40,75" stroke="black" fill="none"></polyline>
</svg>