文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用<svg> viewBox属性？

问如何使用<svg> viewBox属性？
EN

Stack Overflow用户

提问于 2013-03-11 10:12:19

回答 6查看 56.7K关注 0票数 85

我是从svg的官方文档中学习的，有这样的一行。我不明白，如果它已经有了width和height属性，那么在viewBox="0 0 1500 1000"中再次指定它有什么意义呢？它是这样定义的：“一个px单位等于一个用户单位，因此5px的长度等于官方文档中的长度”5“，因此这个viewBox是一个1500px宽1000高的视图，超过了300px和200px。那么为什么它首先要定义宽度和高度值呢？

 <svg width="300px" height="200px" version="1.1"
         viewBox="0 0 1500 1000" preserveAspectRatio="none"
         xmlns="http://www.w3.org/2000/svg">

svg

回答 6

Stack Overflow用户

回答已采纳

发布于 2013-03-11 10:31:41

宽度和高度是<svg>的大小。viewBox控制其内容的显示方式，因此viewBox="0 0 1500 1000“将按5倍的比例缩小<svg>元素的内容(1500 / 300 =5和1000 / 200 = 5)，并且内容的大小将是不使用viewBox而不使用<svg>时的1/5

假设你有一个弹性表面，并将其等分成4个部分。如果你扔掉3块，你得到的曲面大小是原始曲面的四分之一。如果现在拉伸曲面并使其大小与原始曲面相同，则曲面上的所有内容都将是原始曲面的两倍大小。这就是viewBox和width/height的关系。

票数 94

Stack Overflow用户

发布于 2013-06-03 01:36:15

如果不指定viewbox，则假定元素中的所有无单位数字都是像素。( SVG假定将像厘米这样的单位转换为像素时为90 dpi或像素/英寸。)

viewbox允许您使元素中的无单位数字表示“用户单位”，并指定如何将这些单位映射到大小。为简单起见，仅考虑x坐标，即标尺。您的viewbox显示您的标尺将有1500个单位来匹配svg的200像素大小宽度。

从0到1500 (无单位，即用户单位)的直线元素将在绘制时拉伸200像素，即跨越svg绘图的宽度。

(由于SVG可以在不损失分辨率的情况下进行扩展，因此当用户放大或缩小时，像素在现实世界中并没有多大意义。)

这是一种坐标变换。

我建议您学习一本像"SVG Essentials“这样的书，大约用了10美元，我大致引用了这个答案。

票数 32

Stack Overflow用户

发布于 2017-12-30 05:56:59

默认情况下

<svg width="300" height="200">

svg网格的“标尺”以像素为单位( svg中的所有形状都以像素为单位)

但是你想使用你自己的单位，你可以使用viewBox attr来实现：

<svg width="300" height="200" viewBox="0 0 1500 1000">

这意味着：

水平轴： 1500 (宽度单位)= 300px => 1(宽度单位)= 300/1500px = 1/5px

垂直轴： 1000 (高度单位)= 200px => 1(高度单位)= 200/1000px = 1/5px

现在svg中的所有形状都将缩放：

与原点相比，它们的宽度比例为1/5px (1/5 <1 =>比例)。

与原点相比，它们的高度也缩放到1/5px (1/5 <1 =>比例缩小)

票数 29

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15335926

复制

git 合并两个仓库，并保留历史记录

add auto commit conflict merge

问题 repo1 repo2是两个无关联的仓库，需要合并并保留两者的提交历史 git checkout repo1 repo1/master git checkout repo2 repo2/master git merge repo1 直接尝试合并时会报错 fatal: refusing to merge unrelated histories 解决步骤使用参数–allow-unrelated-histories合并 git merge repo1 --allow-unrelated-hist

路过君

2023/02/10

6330

2018-07-20 如何将 SVN 迁移至 GIT 并保留所有历史记录

svn git 安全 java

原文地址： http://pcme.info/blog/2013/09/06/how-to-migration-svn-to-git/

Albert陈凯

2018/07/24

1.4K0

git 回滚代码并保留提交历史

git apply commit diff 搜索

王云峰

2023/10/23

3330

撤销 git add . 并保留修改的方法

git

执行完 git add . 才发现没有在对应的分支，如何撤回呢？可以参考下面的方法：文件退出暂存区，但是修改保留： git reset --mixed 撤销所有的已经 add 的文件： git reset HEAD . 撤销某个文件或文件夹： git reset HEAD -filename 另外：可以用 git status Git 会告诉你可以通过那个命令来执行操作。未经允许不得转载：w3h5 » 撤销 git add . 并保留修改的方法

德顺

2022/01/12

33.9K0

git --- ! [rejected] master -> master (non-fast-forward)

git github 开源

3.出现错误的主要原因是github中的README.md文件不在本地代码目录中

小蔚

2019/09/12

3.9K0

git --- ! [rejected] master -> master (non-fast-forward)

解决Git - git push origin master 报错

git

重新输入git push -f 或者 git pull --rebase origin master

达达前端

2022/04/29

3340

git强制覆盖本地代码

git

在使用Git时，当merge失败push不上时，通常需要让本地代码恢复成上一次提交到仓库的内容。

用户2323866

2021/06/24

1.6K0

记一次保留订单历史记录的方案讨论

hbase TDSQL MySQL 版

假设一条记录包含以下信息：(id,username,score,version),score每次变更，version就加1，对于username相同的数据，只有version最大的那一条是有效的，也就是Mysql按字段分组取最大值记录问题，怎么做才能使查询效率高呢

明明如月学长

2021/08/31

2870

【Git】新分支替换 Master 分支

git shell

最近在公司里面在做一个 Web 项目的框架升级，由于改动比较大，与 Master 的代码差异比较大。我们在保证新分支的功能稳定的前提下，完全可以用新分支替换 Master 分支。公司使用的是基于 GitLab 开发的一套代码管理平台。

redszhao

2021/08/09

3.2K0

git强制覆盖本地代码

git

git fetch --all && git reset --hard origin/master && git pull

用户6421725

2019/12/02

1.9K0

git push 报错处理 ! [rejected] master -> master (non-fast-forward)

git

4.添加远程仓库位置：git remote add origin git@gitee.com:chenjiangtao/my-springboot-sample.git

全栈程序员站长

2021/05/19

1.6K0

git上传中：! [rejected] master -＞ master (fetch first)问题的解决方案

git github 开源

分析原因，基本上可以确定是因为github上的远程库与本地库版本不一致（我对github上的文件做了编辑操作，且未更新到本地，当然也可能还有其他原因…），通过一番研究，找到了两种解决方案：

江一铭

2022/06/16

7210

git上传中：! [rejected] master -＞ master (fetch first)问题的解决方案

Git - git push origin master 报错的解决方法

其他

git push origin master 报错的解决方法错误提示如下 123456789 [root@linux1 php]# git push -u origin master To git@github.com:kangvcar/Results-Systems--PHP.git ! [rejected] master -> master (fetch first) error: failed to push some refs to 'git@github.com:kangv

KangVcar

2018/07/06

8350

git: 简洁高效的双分支式 git flow (master + dev)

其他

使用 git branch （git 分支）进行版本控制，可以让大家有效地合作，使得项目井井有条地发展下去。

JNingWei

2018/09/27

1.9K0

Git 如何 clone 非 master 分支的代码

git clone 解决方案

默认 clone 的是这个仓库的 master 分支。如果最新的代码不在 master 分支上，该如何拿到呢？如下图所示，最新的代码可能在daily/1.4.1分支上，我们希望拿到这个分支上的代码。

零式的天空

2022/03/28

4200

Merge vs Rebase

git

git rebase命令经常被认为是Git巫术，初学者应该远离它，但它实际上可以让开发团队在使用时更加轻松。在本文中，我们将git rebase与相关git merge命令进行比较。

银河1号

2019/04/12

1.7K0

git禁止在master分支push和commit

git https 网络安全

作为管理者，在远端将master分支设为保护分支，可以从根源上杜绝直接推送到master的问题。dev分支同理。

职场亮哥

2020/10/10

6.6K0

svn 项目迁移到 git 保留 commit 记录

svn

最近迁移了两个 SVN 项目到 Gitlab 上，唯一的目的就是想把提交记录保存下来，至于谁提交的无所谓，只希望能在看不懂一些代码的时候能追溯回去看看当时为什么这样修改。随后查看了很多资料，初试的时候遇到了很多问题，最终使用如下命令完美解决：

我与梦想有个约会

2018/12/12

7730

git 主干master分支回滚到历史版本

git

-- 本地分支回滚到指定版本 git reset --hard <commit ID号>

五月

2022/11/15

1.3K0

动图学CS: 有用的 Git 命令（上）

git

尽管 Git 是一个非常强大的工具，但是我相信大部分同学有时候学起 Git 来，感觉很难搞~ 笔者总是习惯于在脑海中重现学习的知识，Git 也一样：当我们执行了切换分支命令，分支之间是如何交互的？又是如何影响历史提交的？当我在 master 分支上执行了强制 reset 又 force push 到了远端，又把 .git 文件夹删掉，我的同事为什么会哭？？

savokiss

2020/05/08

1K0

相似问题

git:清除git历史记录，只在master中保留合并的提交

在保留历史记录的同时覆盖git分支

在git上重命名文件并保留历史记录

合并两个Git repos并保留历史记录

Git:合并master到新的分支，并清除master

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问如何使用<svg> viewBox属性？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

git:清除git历史记录，只在master中保留合并的提交

在保留历史记录的同时覆盖git分支

在git上重命名文件并保留历史记录

合并两个Git repos并保留历史记录

Git:合并master到新的分支，并清除master

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用<svg> viewBox属性？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

git:清除git历史记录，只在master中保留合并的提交

在保留历史记录的同时覆盖git分支

在git上重命名文件并保留历史记录

合并两个Git repos并保留历史记录

Git:合并master到新的分支，并清除master

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用<svg> viewBox属性？
EN