为什么声明SVG的viewBox不同于在具有适当尺寸的SVG元素的符号元素上声明它？
SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。在SVG中，viewBox是一个用于定义可视区域的属性，它指定了SVG图形在用户代理中显示的部分。
声明SVG的viewBox与在具有适当尺寸的SVG元素的符号元素上声明它是有区别的。具体原因如下：
- viewbox的作用：viewBox属性定义了SVG图形的可视区域，它通过指定四个值（min-x、min-y、width、height）来确定图形的显示范围。这样可以实现图形的缩放、平移和裁剪等操作。
- 符号元素的作用：SVG中的符号元素用于定义可重用的图形对象，可以在文档中多次引用。符号元素本身不会直接显示在页面上，而是通过使用use元素进行引用。符号元素可以在使用时通过设置width和height属性来指定尺寸。
- 区别：声明viewBox的作用是定义SVG图形的可视区域，而在具有适当尺寸的SVG元素的符号元素上声明viewBox则是为了定义符号元素的可视区域。由于符号元素可以在多个地方引用，每个引用位置可能需要不同的可视区域，因此在符号元素上声明viewBox可以实现不同的显示效果。
总结起来，声明SVG的viewBox是为了定义SVG图形的可视区域，而在具有适当尺寸的SVG元素的符号元素上声明viewBox是为了定义符号元素的可视区域，以实现不同的显示效果。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云SVG图像处理：https://cloud.tencent.com/product/tci
- 腾讯云云原生应用引擎：https://cloud.tencent.com/product/tke
- 腾讯云数据库服务：https://cloud.tencent.com/product/cdb
- 腾讯云服务器：https://cloud.tencent.com/product/cvm
- 腾讯云音视频处理：https://cloud.tencent.com/product/mps
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobdev
- 腾讯云对象存储：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙：https://cloud.tencent.com/product/tencent-meta-universe
相关·内容
所以，我有一个宽617个单元，长617个单元的svg。因此，根据我目前对svgs工作方式的理解，我希望这样做： <svg viewBox="0 0 200 300"> <symbol id="testSym" viewBox</
浏览 27提问于2020-11-26得票数 0
我试图在HTML页面中结合“符号”和“使用”SVG元素，但我似乎无法让它发挥作用。任何帮助都会很棒。
#box1, #box2 {widt
浏览 5提问于2017-11-30得票数 2
回答已采纳
冒着听起来像菜鸟的风险，我如何才能更改SVG绘图的默认打开位置？这个绘图非常大-- 2130x3100px --比我的屏幕区域大，并且有定义路径的ID。这些路径勾勒出建筑楼层平面上的各个房间的轮廓。我试图粘贴完整的SVG代码，以帮助说明这一点，并向读者寻求帮助。有没有办法把它贴上去？目前，只包含(随机房间的)片段。
目前，该文件默认位于绘图的左上角，我想将其更改为在</em
浏览 1提问于2013-02-05得票数 0
今天升级到20.04，文档查看器无法打开.svg文件。它一直在犯这个错误。以前，当我使用18.04时，一切都很好。我没有遇到过这样的错误。DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904&#x
浏览 0提问于2020-08-07得票数 5
回答已采纳
1回答
有一个SVG内联一个HTML文档，带有一个viewbox "x y w h“。如何检查元素是否在视图框内？我尝试保存viewbox线缆，并且我想要检查的元素是否在viewbox中，我做了
浏览 3提问于2012-03-24得票数 6
根据我所读过的 of ，当插入带有<use>的SVG <symbol>时，viewBox属性只需要定义一次--在<symbol>标记中。这在名义上是可以的，但是<use>元素的内容使父<svg>溢出了相当大的因子(显然总是父svg元素大小的比例，尽管它似乎取决于CSS样式)。然后是去年这
浏览 1提问于2016-09-29得票数 4
回答已采纳
1回答
我有一个定义了viewbox属性的svg元素，其中高度和宽度都等于100%。svg包含一系列polygon对象。在单击一个多边形时，我希望它展开以填充整个svg (阅读:整个屏幕)。我可以访问svg元素的尺寸并相应地调整polygon的大小，但是由于viewbox属性的缘故，无法绘制宽度。
有没有办法计算viewbox<
浏览 1提问于2014-05-14得票数 1
我有一个包含SVG的HTML页面。我知道我想以编程方式将HTML元素(准确地说是输入元素)放在SVG之上。如何将元素添加到该位置？我的一个想法是，在SVG周围创建一个与我的尺寸完全相同的div： <s
浏览 9提问于2017-07-24得票数 3
5回答
我们的目标是让<svg>元素扩展到它的父容器的大小，在本例中是一个<div>，不管这个容器有多大或多小。="100" height="100" /></div>
这个问题最常见的解决方案似乎是在<svg>元素上</e
浏览 1提问于2012-01-19得票数 119
1回答
SVG图像比例？对于移动应用程序
、、、、
我阅读了很多资源，但我似乎无法获得适合浏览器窗口的SVG图像。做这件事最好的方法是什么？谢谢你的帮助..顺便说一下，我使用的是Jquery mobile/HTML5
浏览 0提问于2012-07-10得票数 1
回答已采纳
我在使用jQuery 1.7.1制作SVG图像的高度动画时遇到了一个潜在的bug。我希望图像高度缩小到0，同时保持相同的宽度。显然，Chrome中的前一个行为是一个错误(在中描述)。</body>
然而，在Firefox中，宽度和高度都会发生变化:它<
浏览 2提问于2012-02-03得票数 0
回答已采纳
我有一个元素，比如我的矩形中的所有东西都是以点为单位指定的，但是转换显然是通过像素完成的，我不能改变矩阵中的单位(...)到像矩阵这样的点(1pt 0pt...)
浏览 0提问于2013-12-09得票数 0
1回答
我正在尝试使用svg创建圆圈，并且我正在努力使SVG的高度相对于内容。我知道我可以硬的宽度和高度，但这样的圆圈就不会那么接近彼此。在SVG上应用时，高度自动和宽度100%似乎不起作用，下面是我当前的HTML和css。我发帖子是为了看看是否有人有我不知道的解决方案，我一直在尝试其他帖子中的多个组合，但似乎什么都做不到。<div>
<svg</
浏览 0提问于2020-09-05得票数 1
回答已采纳
1回答
SVG和document.write(svgClone.innerHTML)。我的最终结果是：
请原谅这里的混乱，这里包含了SVG的全部代码，并显示了它的呈现方式。我在Y轴上缩放1.3737的原因是因为图像是1280x720，但1280x989的纵横比接近1:3，这大约是US letter的AR。无论如何，正如你所看到的，显示器并不是很吸引人，当它</em
浏览 19提问于2017-12-15得票数 1
回答已采纳
1回答
不呈现使用标记的SVG
、、、
DOM已经包含一个空SVG标记(svg)。当我尝试用id (iconId)动态追加现有SVG符号(symbol)的symbol标记时：svg[0].setAttribute('viewBox', symbol.getAttribute('viewBox'));
svg.append('<use xlink:href="#&#
浏览 4提问于2014-09-22得票数 5
回答已采纳
1回答
基于，我对从svg文件中提取的符号进行了表示。原始的svgs具有x、y、高度和宽度等属性。当将svg添加到一个svg文件并使它们成为符号时，我发现向<symbol>添加x、y高度和宽度属性是无效的。我通过在<symbol>的样式属性中添加它们来解决高度和宽度问题，因为它支持这个属性。</symbol>
</sv
浏览 2提问于2016-02-13得票数 0
回答已采纳
我使用SVG徽标作为背景图像，但在Internet Explorer (edit:和Safari)中似乎无法使其正确地与左侧对齐。/images/ss_logo.svg); width: 100%; float: left;}
您可以看到，<div>应该跨越其父元素的100%，但是会在元素的左侧显示徽标。这在Chrome和Safa
浏览 33提问于2013-07-30得票数 78
回答已采纳
1回答
SVG D3图像大小调整问题
、、、、
我有一个使用d3创建的SVG图像。我希望将svg图像包含在其父div容器中。然而，svg超越了父div。下面是我的代码： <svg></svg> <script>
var svg</
浏览 3提问于2017-11-29得票数 1
主要问题：<svg id="viewbox" transform="translate(1,5)scale(2)"> // continuously gets the tran
浏览 4提问于2018-12-11得票数 2
1回答
我在Opera中使用SVG后台遇到了困难。当我缩小页面时，背景开始在x轴上重复，尽管有` background -repeat: repeat-y‘ background-image: url("http://www.anarchopedia.org/images/2/22/Heckert_GNU_white.svg</
浏览 0提问于2013-03-05得票数 12
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
