如何设置svg的宽度和高度？
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以通过代码来描述图形，具有无损放大、可编辑性强等特点。设置SVG的宽度和高度可以通过以下几种方式实现：
- 在SVG标签中直接设置宽度和高度属性：
- 在SVG标签中直接设置宽度和高度属性：
- 这种方式直接在SVG标签中设置宽度和高度属性，可以指定具体的像素值。
- 使用CSS样式设置宽度和高度：
- 使用CSS样式设置宽度和高度：
- 这种方式通过CSS样式设置包裹SVG的容器的宽度和高度，SVG会自动适应容器的尺寸。
- 使用viewBox属性设置宽度和高度：
- 使用viewBox属性设置宽度和高度：
- viewBox属性定义了SVG图形内容的可见区域，前两个参数表示可见区域的起始点坐标，后两个参数表示可见区域的宽度和高度。通过调整viewBox的参数，可以实现对SVG图形的缩放和裁剪。
以上是设置SVG宽度和高度的几种常见方式，根据实际需求选择合适的方式进行设置。
腾讯云相关产品和产品介绍链接地址：
相关·内容
4回答
怎么买云服务器？
云服务器、5折上云
请描述您的问题
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=cdb&utm_campaign=firstpurchase&utm_term=0110
浏览器信息
Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 474提问于2018-03-12
1回答
用适当的viewBox值替换宽度和高度属性
javascript、html、svg
有助于理解viewBox的目的，但并不完全相同。
目的是用相应的viewBox属性替换SVG元素的宽度和高度属性。我们的代码要求设置viewBox，而不是宽度和高度。
有没有一种算法方法可以做到这一点？
例如，下面的SVG元素用0 0 6 6的viewBox属性替换时看起来不一样。
原始
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='6' height='6'>
<rect w
浏览 0提问于2019-08-03得票数 0
2回答
jQuery height()不返回实际高度，而是返回0、-2或2
jquery、html、css
我想要一个图标在不同长度的标题前，有时1行，有时2行，图标应调整到1或2行的高度。 由于svg占用了所有可用空间，因此它将始终与.svg-container一样大。图标的.svg是正方形的，这就是我想要为它们的容器.svg-container实现的。它应该具有与.headline元素相同的高度，因此此高度也适用于.svg容器的宽度。 因此，我想要获得.headline跨度的高度(或者应该是一个div?)使用容器，通过.css()将返回值添加到.svg- $('.headline').height();。 但是我没有得到真正的高度，它返回0。我尝试获取页面上其他元素的高度，但返
浏览 48提问于2019-05-16得票数 0
3回答
智能联想的使用示例呢？详见API/SDK使用？？ 没有啊，示例代码也没有？
云 API、官方文档
智能联想的使用示例呢？详见API/SDK使用？？ 没有啊，示例代码也没有
标题：智能联想 - 云搜 - 文档首页 - 腾讯云文档平台 - 腾讯云
地址：https://cloud.tencent.com/document/product/270/1201
浏览 420提问于2018-03-13
1回答
在使用媒体查询时保持SVG中心
css、d3.js、svg、media-queries
我有一个页面，其中我使用d3.js绘制了几个SVG。在构建SVG图形时，我指定了固定的高度和宽度(它代表我想要的最大高度/宽度)。这很好，使用CSS，一切都集中在页面上，这是我想要的。但是，当屏幕宽度低于固定宽度时，我也希望SVG能够缩放。
为了解决缩放问题，我从SVG中删除了高度和宽度属性，而是使用了viewBox (提供0 0 <width> <height>和preserveAspectRatio )。酷-现在所有的东西都缩放到整个页面的宽度，比如CSS中的width = 100%。
于是我添加了我的媒体查询。它们可以工作--SVG的最大宽度被保留下来，并且低于这
浏览 3提问于2017-02-23得票数 2
回答已采纳
1回答
为什么“and”大小和圆“笔画宽度”不像预期的那样？
css、svg
谷歌Chrome 60.0.3112.90
我学习SVG。为什么svg的实际尺寸不是10厘米x10厘米，圆stroke-width不是1pt，radius不是2.5cm
.svg-container, .canvas{
margin: 0;
padding: 0;
width: 10cm;
height: 10cm;
background-color: green;
}
.geometry {
stroke: gray;
fill: yellow;
stroke-width: 1px;
}
<div class='svg-container'>
浏览 1提问于2017-08-16得票数 0
回答已采纳
11回答
腾讯云上如何自建DNS？
云服务器、DNS 解析 DNSPod、linux、centos、dns
当前腾讯云私有域VPCDNS暂时还不支持背景下，怎么在腾讯云CVM环境下构建内网解析？
实现功能：
1.支持腾讯云云环境保留域名解析如：mirrors.tencentyun.com;
2.支持用户自有业务域名内部网解析如：you.aaa.com；
3.支持访问外网域名解析如：www.qq.com；
4.支持分域名转发到不同的DNS服务器；
基础环境：
CVM：标准型SA2（请根据自身业务情况，选择样本）
操作系统：CentOS Linux版本7.6.1810（核心）
绑定：bind-9.11.4-16.P
浏览 1377提问于2021-01-27
2回答
svg viewBox奇怪的行为？
svg、viewbox
我正在尝试弄清楚svg viewBox是如何工作的，但是下面的代码破坏了所有的逻辑。
<svg width="100" height="100" viewBox="0 0 1 20">
<circle cx="10" cy="10" r="10" fill="red"/>
</svg>
在我的现实中，viewBox用于定义要在视口中显示的svg画布区域。这段代码的结果应该是最左边的一小块圆圈水平居中，两边留有空格，但是chrome和
浏览 5提问于2019-05-06得票数 0
2回答
svg viewBox属性移动子位置
svg、viewbox
<svg xmlns="http://www.w3.org/2000/svg" width="1200px" height="250px" viewBox="0 0 400 250" id="RoomsSVG">
<svg id="Room101" width="400px" height="250px" x="0px" y="0px">
<rect id="Room101R
浏览 1提问于2014-11-02得票数 0
4回答
之前买的服务器可以退款么？
费用中心、5折上云
之前买的服务器可以退款么？你这活动力度好大啊
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=banner&utm_campaign=firstpurchase&utm_term=0109
浏览器信息
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 1591提问于2018-01-20
6回答
我是从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
浏览 3提问于2013-03-11得票数 85
回答已采纳
1回答
为什么没有显示模式
html、svg
为什么图案不显示在圆圈内？
<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="pattern" viewBox="0 0 1000 1000" width="10%" height="10%">
<polygon points="569.2 518 396 618 222.8 518 222.8 318
浏览 3提问于2021-03-07得票数 0
回答已采纳
3回答
SVG阴影截断
svg、shadow、clipping、svg-filters
我正在使用的SVG有一个通过feGaussianBlur过滤器放置的阴影。
阴影本身显示正确，但在顶部和底部边缘被切断。
就像这样：
有关的特别志愿人员小组是：
<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg
PUBLIC '-//W3C//DTD SVG 1.1//EN'
'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg height="600"
浏览 4提问于2013-07-26得票数 75
回答已采纳
5回答
跨浏览器SVG preserveAspectRatio
html、svg、cross-browser
我正在尝试有一个SVG图形内的<img />标签，这将适合(没有裁剪)内的标签与保留的纵横比。我在Inkscape中创建了SVG。它在除Internet Explorer9之外的所有浏览器上都能像预期的那样工作。
要使其在IE 9上工作，我必须添加viewBox="0 0 580 220"和preserveAspectRatio="xMidYMid meet"，并删除width="580"和height="220" SVG属性。
<svg viewBox="0 0 580 220" preserv
浏览 50提问于2013-05-08得票数 23
回答已采纳
9回答
使用CSS更改SVG视图框大小
css、svg
问题:有没有一种方法可以用CSS改变SVG viewbox的大小，同时保持纵横比？或者，是否有另一种方法可以在没有视图框的情况下保留SVG的纵横比。
问题:我想相应地调整SVG的大小，但保持纵横比不变。viewbox的宽度随页面调整，但高度不随宽度调整。这样做的问题是容器div的高度取决于viewbox的高度。因此，即使在viewbox的下半部分没有显示任何内容，容器div也可能真的很高。
小提琴：
<style>
div{
width: 100%;
height: 500px;
background-color: #00ff
浏览 6提问于2014-06-28得票数 57
1回答
缩放svg图形
svg、librsvg、rsvg
我尝试用较小的宽度和高度(像素或厘米)来调整要在illustrator中打开的svg文件的大小，我通过更改<svg>标签中的宽度、高度和viewBox属性来实现这一点，但它根本不起作用。通过搜索，我发现transform属性通过矩阵值影响图形的实际大小调整，任何关于使用python或librsvg成功缩放svg图形的现成函数或脚本的想法，就像我使用inkscape生成svg文件一样。谢谢
浏览 3提问于2010-10-04得票数 1
2回答
使用ViewBox在浏览器中调整SVG对象大小的问题
javascript、jquery、svg
我有两个div容器。第一个包含许多小型SVG图像，第二个应该包含您单击的SVG图像。
在第一个div中任何SVG图像的“单击”中，我想：
克隆SVG图像。
将它(克隆体)的大小调整到原来的5倍。
在第二个div容器中查看它。
我做了一些研究，发现我可以使用viewBox控制SVG图像的缩放和大小大小。因此，我设置了viewBox属性。一个小型svg如下所示：
var small svg = div.append("svg:svg")
.attr("class"
浏览 5提问于2012-12-11得票数 3
回答已采纳
2回答
D3力布局:基于当前可见视图的相对中心定位
d3.js、graph、center、force-layout
我有一个d3.js图，这是一个强制布局设计。我允许用户在设置边界的情况下放大或缩小图形，这样他们就不能放大超过1，也不能放大到0.1以上。现在，当我在图上绘制值时，我会自动将它们发送到图形的中心(基于SVG容器的高度和宽度)。这是很好的工作，直到我放大，然后放大到其他地方，并绘制一个新的节点。新节点将返回原来的中心，而不是我的新的相对中心。
我现在放大的时候是怎样的：
function onZoom() {
graph.attr("transform", "translate(" + zoom.translate() + ")" + &#
浏览 5提问于2014-01-31得票数 2
回答已采纳
2回答
如何使SVG在html中不带滚动条出现
html、svg、image-scaling
如何在HTML中没有滚动条的情况下使SVG可靠地出现？在Firefox和Chrome中都能工作的东西就足够了。
最基本的步骤是SVG在文档中显示为“自然”宽度和高度。完全扩展。没有滚动条。firefox通常会这样做。Chrome一般不会(除非我事先知道实际的宽度和高度)。更高级的步骤是给SVG一个任意的宽度(比如400个像素)，并且SVG看起来适当地缩放，同时保持它的高宽比。同样，没有滚动条。
我不想知道HTML中SVG的自然维度。更改HTML或CSS是最好的，尽管更改SVG (一次，不是我想要显示的每个大小)也会很好。
这种事有可能吗？
下面是嵌入svg的一些示例html。
<html
浏览 9提问于2010-07-29得票数 1
回答已采纳
1回答
用VH表示高度响应箱形SVG
html、css、svg、responsive-design
我希望能够以忽略方面(适合屏幕)的方式将SVG图形与我的div相匹配。然而，当我改变窗口的宽度时，我的图表就会从我的黄色框中消失。如何使用vh表示的div高度来纠正这种情况？
.svg-container {
display: inline-block;
position: relative;
width: 100%;
height: 60vh;
/* aspect ratio */
vertical-align: top;
overflow: hidden;
background-color: yellow;
}
.svg-content-res
浏览 3提问于2015-07-31得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
