asp.net mvc5 网站开发实践,金融行业seo整站优化,wordpress完全静态化,浙江网络公司网站建设文章目录前言一、案例解析前言
svg 的viewBox 可以重新定义视口的显示范围#xff0c;通常表现为平移#xff0c;缩放内容#xff0c;之前测试的一直是viewBox 和viewPort 之间的等比缩放#xff0c;后来发现不等比情况与认知有些出入#xff0c;如下
svg width通常表现为平移缩放内容之前测试的一直是viewBox 和viewPort 之间的等比缩放后来发现不等比情况与认知有些出入如下
svg width100 height100 viewBox0 0 50 100 styleborder: 1px solid #dddcircle idmycircle cx50 cy50 r50 stroke-width1 stroke#0f0/
/svg避免误导就不说之前对viewBox 的理解了。
一、案例解析 如何确定添加viewBox 之后的内容以下是通过测试得出的步骤
第一步 确定 viewBox 的选区蓝色只考虑中心对齐策略将viewBox 与viewPort 中心重叠中心缩放 viewBox 使其恰好能放入viewPort,以较小的长宽缩放比如viewPort.height/viewBox.height为准本例 中较小缩放比为1因此并不需要缩放viewPort(红框)所示即为缩放后的结果
换个具有明显缩放和平移效果的如下
svg width200 height100 viewBox50 50 400 100 styleborder: 1px solid redcircle idmycircle cx50 cy50 r50 /
/svg
