如何设置svg的高度和svg所在容器的高度
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，它可以通过数学公式来描述图形，因此可以无损地缩放和放大而不失真。在设置SVG的高度和SVG所在容器的高度时，可以采取以下几种方式：
- 使用CSS样式：可以通过设置SVG元素的height属性来指定SVG的高度，同时设置SVG所在容器的height属性来确定容器的高度。例如：
<style>
.container {
height: 400px;
}
.svg {
height: 100%;
}
</style>
<div class="container">
<svg class="svg" viewBox="0 0 100 100">
<!-- SVG图形内容 -->
</svg>
</div>在上述示例中，通过设置SVG元素的height属性为100%来使其填充容器的高度。
- 使用JavaScript动态设置：可以通过JavaScript来动态设置SVG的高度和容器的高度。例如：
<div id="container">
<svg id="svg" viewBox="0 0 100 100">
<!-- SVG图形内容 -->
</svg>
</div>
<script>
var container = document.getElementById("container");
var svg = document.getElementById("svg");
// 设置SVG的高度
svg.setAttribute("height", container.offsetHeight + "px");
// 设置容器的高度
container.style.height = svg.offsetHeight + "px";
</script>在上述示例中，通过JavaScript获取容器和SVG元素的高度，并进行相应的设置。
- 使用响应式设计：可以使用响应式设计的原则来自适应不同屏幕尺寸和设备。通过设置SVG的宽度和高度为百分比或使用媒体查询来适应不同的屏幕尺寸。例如：
<style>
.svg {
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.svg {
width: 50%;
}
}
</style>
<svg class="svg" viewBox="0 0 100 100">
<!-- SVG图形内容 -->
</svg>在上述示例中，通过设置SVG的宽度为100%和高度为auto来实现自适应的效果，并使用媒体查询在小屏幕设备上设置不同的宽度。
总结：设置SVG的高度和SVG所在容器的高度可以通过CSS样式、JavaScript动态设置或响应式设计来实现。具体选择哪种方式取决于实际需求和设计要求。腾讯云提供了云原生服务、云服务器、云数据库等相关产品，可以根据具体需求选择相应的产品。详细信息请参考腾讯云官方网站：https://cloud.tencent.com/。
相关·内容
1回答
SVG失真
、、、
我正试图在我的网站上嵌入几个..svg文件。只要我使用Chrome、Firefox或我测试过的任何移动浏览器，一切看起来都很好。但是，有一个例外:每当我在Windows (Internet )上看到svg时，图像就会被扭曲。
我想我已经找到了这种行为的原因:因为我希望任何svg的大小都是流动的，所以我给了它们一个百分比的宽度和一个自动高度。正如前面提到的，这对于大多数浏览器来说都很好。然而，Internet似乎忽略了高度:自动将svg扩展到它的最大高度。
也就是说，一种解决方案是为每个.svg分配固定的维度。但这将牺牲一个响应性设计的想法。
有谁知道这个问题可能是什么吗？
哦，这是我网站的一个
浏览 2提问于2014-05-29得票数 2
回答已采纳
2回答
SVG标记占用额外空间
、、、
所以我在HTML5中的SVG元素遇到了一个奇怪的大小问题。它占用的空间比我想象的要多得多。图像中的每个小矩形都是一个宽度和高度均为"20“的矩形元素。
SVG元素的高度和宽度应为20*10 = 200，但尺寸应为680x508。
您可以在此处查看已检查的svg元素->
HTML如下所示：
<svg>
<rect x='0' y='0' height='20' width='20' stroke='black' stroke-width=''/>
浏览 0提问于2012-11-03得票数 5
回答已采纳
4回答
页面上有4个使用相同svg梯度的元素
<svg> <defs> <linearGradient id="gradient"> <stop offset="0%" style="stop-color: deepPink"></stop> <stop offset="100%" style="stop-color: #009966"></stop>
浏览 3提问于2015-01-28得票数 1
回答已采纳
我正在尝试构造具有viewBox属性的内联SVG，但没有显式的宽度或高度属性。我使用CSS将SVG的宽度设置为100%。这应该让SVG缩放到它的包装容器，保持由viewBox设置的纵横比。在Chrome和Firefox中，这是完美的！
下面是我所讨论的最小的代码示例：
HTML：
<div>
<svg viewBox="0 0 100 10">
<text x="1" y="9">hello</text>
</svg>
</div>
CSS：
div {
浏览 9提问于2014-10-09得票数 26
我有一个带有svg背景+动画的div。我添加了一个按钮，并说当我单击一个类时，类应该被切换/添加和移除，这样“背景图像”就会发生变化。但它不起作用。也许这是jquery中的一个错误，但实际上我一点也不知道。
这是我的代码：
我的css代码包含完整的svg代码(->u不能超过30.000 charakters )：
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: black;
overflow-y: hidden;
}
.Space-Contain
浏览 4提问于2017-02-05得票数 1
回答已采纳
我在网页中有一个简单的SVG，我希望SVG只响应宽度。问题是，当屏幕高度小于SVG高度时，它也会缩小。
HTML：
<div class="container">
<svg version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin">
<circle stroke="#0
浏览 0提问于2014-05-24得票数 1
回答已采纳
我在使用SVG绘制IE 11中的图像时遇到了问题。这个问题在Chrome中并不存在。我在SVG方面的经验也很少。在这种情况下，我只选择了SVG，这样我就可以创建一个在iOS下工作的图像映射，而常规的图像映射则不能。
我有以下HTML代码：
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 800" preserveA
浏览 1提问于2015-12-26得票数 2
回答已采纳
2回答
我正在使用jVectorMap在div中创建一个map。
然而，无论我做什么，map只占div的一小部分。看起来是<svg style="width: 100px; height: 100px;">造成的
我已经尝试了在包含的div上设置大小，我尝试了各种css解决方案，但它仍然不允许我调整大小。背景颜色可以调整大小，但SVG元素不会。
如何使用jVectorMap调整SVG元素的大小？
下面是我的脚本：
<script>
$('#map').vectorMap({
map: 'world_mill_en',
reg
浏览 0提问于2015-04-20得票数 0
我在html页面上无法正确显示svg图像。我使用快照创建了映像，提取了svg并添加了xml和doctype标记。
svg和测试页面代码在这里：
当我用铬打开svg时，它看起来很好。当我在这个html中打开它时，菩提处的文本就消失了，代之以破折号：
<html>
<head></head>
<body>
<img src="/assets/composingcontracts/mappingdiagram.svg" width="850px" height="450px">
<
浏览 3提问于2015-01-27得票数 0
回答已采纳
我有一堆<input>滑块，DOM看起来像这样-
<div>
<label style="width:100px">Slider A: </label>
<input type="range" style="width:600px; height:20px;"/>
<svg width="600px" height="20px">
<rect x="0" y="0" width="
浏览 0提问于2016-03-09得票数 0
我是新的SVG设计。努力缩小，放大/缩小容器，并使其响应所有的设备。
是否有可能以适合所有设备并处理浏览、放大/缩小功能的方式来设计SVG？
我尝试过对每个断点使用视口和视图框。
对于桌面，我有SVG来装在一个容器里。应该使用容器(SvgClass)进行缩放和缩放。
.svgClass {
background-image: url('assets/svg/desktop-svg.svg');
width: "100%";
height: 800px;
position: absolute;
}
<div class="svgClass&
浏览 3提问于2020-02-17得票数 1
回答已采纳
2回答
我在一个网站中使用SVG，但是在调整它的大小时遇到了一些问题。它显示在网站的页眉中，在我实现SVG (使用普通图像)之前，我像这样调整了图像的大小：
$("#block_175 img").height($("#header").height() / 2);
现在，由于我使用的是SVG，我尝试了几种方法来调整它的大小，但我似乎找不到方法。下面是我是如何构建SVG的：
<div id='block_175' class=''>
<svg width="100" height="100"
浏览 2提问于2015-05-13得票数 3
回答已采纳
2回答
Svg 1px-背景线条宽度
、、、、
我需要在段落中的每一行下划线。
<p class="underline">multi-line text multi-line text multi-line text</p><br/>
<p class="underline" style="background-repeat: no-repeat;">single-line text</p>
以下是一种风格：
.underline { width: 100px; font-size: 12px; line-height: 16px;
浏览 2提问于2011-02-25得票数 1
回答已采纳
1回答
我正在学习前端，我正在尝试从frontendmentor做一个挑战，它还包括一些表单验证。因此，每当用户提交表单时，如果任何输入字段为空，则在输入中应该出现一个小错误图像，并且在输入下面应该有一行声明输入字段不应该为空。 因此，当出现错误时，图像和线条会出现，但窗体的高度会增加。我给车身和封闭容器设置了最小高度，但它还是不能工作.. 质询链接challenge link codepen链接codepen 代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UT
浏览 13提问于2020-10-04得票数 0
回答已采纳
在模板文件中
<div class="chart-container">
<linechart data="data" options="options" mode=""></linechart>
</div>
在css文件中：
.chart-container > .chart {
width:800px;
height:500px;
}
svg元素始终采用1333px的宽度。有没有设置高度和宽度的选项？还是我做错了什么？如下图所示：
即使在全景图中，我
浏览 4提问于2014-11-12得票数 0
因此，我遇到了麻烦，使我的网页应用程序响应。我设法做到了，这样SVG就可以在宽度调整时适应，但是我遇到了身高问题。
对于高度调整，我提出的最佳解决方案是以下js/jQuery代码：
function updateWindow(){
var y = (($(window).height()));
svgMap.style.height=y;
}
updateWindow();
window.onresize = updateWindow;
这样做是将SVG视口高度设置为等于窗口的高度。
浏览 2提问于2013-07-29得票数 0
我是D3的新手，我非常喜欢它，但是在我第一次尝试构建一个简单的条形图时，我陷入了想要将条形图的高度标准化为SVG元素的完整高度的地步。因此，最大的数据值应该缩放到SVG元素的完整高度。所有其他的都应该相对缩放。我很抱歉，这是一个愚蠢的错误，但我看不出来。请帮帮我！太好了！
以下是代码
var dataset = [ 50, 43];
var colorSet = ['rgb(143,172,206)', 'rgb(117,122,184)'];
var w = 260;
var h = 200;
var barPadding = 7;
浏览 0提问于2012-10-29得票数 0
回答已采纳
1回答
我如何能够缩放或调整内嵌的SVG矢量图，只使用CSS，所以所有的艺术品都按比例调整大小，并完全符合其定义的宽度和高度？
应尊重原有的纵横比。
在本例中，我希望将艺术品内容调整为100x100px框，作为图标。下面的片段不起作用，因为它只是裁剪窗口，而不是调整内部内容的大小。
svg {
width: 100px;
height: 100px;
fill: blue;
background-color: red;
}
<svg>
<polygon points="100,0 30,200 200,70 0,70 170,200"
浏览 2提问于2017-03-30得票数 4
回答已采纳
8回答
我使用flutter_svg: ^0.18.0在我的项目中使用svg图像。但我无法找到适当的方法来改变它的大小。
这是我的密码
body: SafeArea(
child: Center(
child: SvgPicture.asset('assets/images/morelights.svg'),
),
),
浏览 18提问于2020-12-16得票数 10
2回答
更新，我重新措辞，得到了完美的答案
基于以下原因，我不认为这是上述问题的重复。
我想要一个kiosk显示，其中一个浏览器选项卡是如何，全屏(按F11)。
我想要一个左右列，中间有一个SVG图像。
Here is a minimal implementation:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>blah</title>
</head>
<body>
<table border=&#
浏览 6提问于2017-08-07得票数 1
回答已采纳
我一直试图在不使容器本身变大的情况下调整这个徽标的大小。我完全被困住了，不知道该怎么办。使用内联样式<svg viewBox="0 0 493.19 493.19" width='400'height='400'>修改徽标svg文件会产生上述结果。我只是想让标志更大，而不是把它下面的所有组件都压下来。我会张贴布局代码本身，如果这将使事情更容易帮助我。谢谢!
const data: QueryResult = useStaticQuery(query)
return (
<ThemeProvider t
浏览 0提问于2020-08-28得票数 1
我正在使用jqWidgets选项卡，在选项卡的内容中包含jQuery contents下拉菜单
我遇到的问题是，当我点击打开下拉菜单时，div会在标签的底部被裁剪掉--我希望下拉菜单的弹出窗口能够覆盖所有内容并完全显示出来
请参阅以下基本示例来重现该行为：
我如何才能最大限度地减少对这两个样式表的修改呢？
<html>
<div style="width : 500px; height : 180px;">
<div id="tabs">
<ul>
<li>Test</l
浏览 1提问于2013-03-07得票数 0
1回答
我在代码中生成高图表。在第一次调用时，下面是生成的svg代码
<svg version="1.1" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="690" height="475">
因此
浏览 3提问于2014-08-22得票数 0
回答已采纳
我可能只是遗漏了一些东西，但是我发现当SVG嵌入到HTML中时，viewBox会被遵守，但是preserveAspectRatio似乎被忽略了。这里有一个非常简单的演示。独立SVG：
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 720 960" preserveAspectRatio="xMinYMin meet">
<rect x="0" y="0" width="720" height=&#
浏览 10提问于2017-04-06得票数 1
回答已采纳
4回答
在div中滚动svg
、、、
我有一个简单的用例。我有一个外部的div和一个内部的svg。喜欢,
<div>
<svg>
...
...
</svg>
</div>
我试图让svg在div中滚动，但没有成功:(我尝试设置：
div {
position: relative;
width: 100%;
overflow: scroll;
}
svg {
width: 100%;
}
但是它不起作用，你们能帮我吗？谢谢你的帮助！
浏览 6提问于2015-04-20得票数 6
3回答
我使用的是d3.js的力布局，我想要使力布局是响应的。
我使用了以下代码：
var width = 1110 ,height = 600 ;
svg = d3.select("#d3_drawing_container").append("svg:svg")
.attr("viewBox", "0 0 " + width + " " + height )
.attr("overflow", "hidden")
浏览 2提问于2014-03-07得票数 0
回答已采纳
2回答
我已经创建了一个包含foreignObject文本的SVG，并使用img标记将其链接到我的HTML页面中。
问题是svg的宽度根据设备进行缩放，但高度固定在153px左右。我已经将svg的宽度和高度设置为100%。
我不能为svg提供固定的高度，因为我希望文本部分能够响应并根据设备进行缩放。
因此，由于图像不能完整显示高度，foreignObject文本内容会被截断。
我已经尝试了viewBox和preserveAspectRatio，但都没有成功。
这是Jsfiddle
<img src="http://treebliss.com/shipping.svg" styl
浏览 2提问于2016-11-18得票数 0
1回答
如果你看看https://jsfiddle.net/0spv56uk/1/ 我在一个有容器的网站上创建一些东西。这个容器不能再宽了(它可能会稍微高一点--以适应屏幕的大小)。 在这个容器中，我将设置图像。它们的大小各不相同。 这些图像/SVG能够在单击按钮时旋转(如代码所示)。我现在用的是华氏90度，但以后可能需要45度。 我遇到的问题是图像在旋转时会溢出容器。我需要它在旋转时在容器内缩放。(容器的底部应该是可扩展的，而不是顶部)。我看过这里的其他线程，它们要么硬编码比例(只有当你有单个图像时才有效)，要么代码不太适用于我。 提前感谢大家。 这让我做了一段时间的噩梦。 以下是我的代码 v
浏览 14提问于2019-06-19得票数 0
当我使用svg时，我在ios上注意到一件奇怪的事情。svg似乎在所有其他浏览器中都工作得很好，但在Safari ipad/iphone上，viewbox在svg的顶部和底部有一些奇怪的空间。有没有其他人遇到过这个问题，你能解决这个问题吗？使用一些简单的svg代码，例如：
<svg width="100%" viewBox="0 0 20 10">
<polygon fill=red stroke-width=0 points="0,10 20,10 10,0" />
</svg>
在ipad/iphon
浏览 0提问于2014-09-29得票数 16
1回答
子内容没有使用背景CSS进行缩放
、、、、
我正在创建一个时间表，其中包含了从星期一到日的一份清单中的具体活动。下面是一个例子：
他们看起来都很棒，除了当你去“星期六”，因为有更多的内容，所以它需要另一行。背景没有与附加的内容一起缩放，所以现在它被推入了另一个部分。我想要的是背景，以更多的网页时，去“星期六”链接。因此，与“星期二”部分相比，我为“节目-日程安排”增加了几个部分
目前的代码是：
<div id="fh5co-schedule-section" class="fh5co-lightgray-section">
<div class="con
浏览 0提问于2018-07-08得票数 0
回答已采纳
作为一名新的前端开发人员，我正试图通过模仿来提高我的css和html技能。下面是我的代码：
.content {
height: calc(100vh - 7.2rem);
overflow: scroll;
flex: 0 1 80%;
align-self: stretch;
background-color: #00DBDE;
background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
display: flex;
flex-direction: column;
}
.sea
浏览 0提问于2020-08-18得票数 0
1回答
前几天我正在看谷歌I/O上的一些聚合物视频，当我谈到他们使用google-map元素的部分时，不管我尝试了什么，它都不会显示。后来，为了让它正常工作，我发现如果我将google-map元素设置为display: block并向其添加一个高度和宽度，它就会显示出来。我在这方面的文档中没有找到任何东西。而且，即使在此之后，地图标记元素也不会显示.我应该直接写个窃听器吗？还是有一个简单的解决办法？
浏览 4提问于2014-06-28得票数 2
回答已采纳
1回答
我正在进行一个项目，其中一些SVG标记是根据用户提供的输入自动生成的。例如，我所拥有的最常见的场景是，我可能有许多SVG对象(例如，rect、省略、多边形等)。在<svg>容器中。
现在的问题是，我的容器SVG有一定的长度和宽度，而不管其内容如何。我试图使我的容器SVG标签只有这么多的长度和宽度，以便它可以包含它的内容，但没有空白。
例如：带有id=svg1的SVG比它的内容所需要的要大得多。
如何使SVG容器具有适当的大小？
注意:我不知道将哪些形状放在SVG容器中，以及它们将放在哪里。另外，SVG可以包含另一个<svg>标记，形状可以在这个内部SVG中。
注2:在某
浏览 3提问于2013-11-26得票数 0
1回答
我想弄清楚，但有很多麻烦：
<div class="wrapper">
<svg width="100%" height="100%" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg
浏览 3提问于2018-05-01得票数 1
5回答
见上图
我试图得到一个‘添加到购物车’按钮，以对齐与其他在同一排的页面。我目前只知道这样做有两种方式：
在其中一个元素之间添加空格以确保正确的对齐
为每个产品元素设置一个固定的高度
问题是，当文本变长并开始包装(如在图像中所显示的)时，按钮在页面上垂直不对齐。
在这种情况下，哪一个是更好的选择?我该如何着手完成这项任务呢？
HTML标记：
.card-title {
font-size: 1rem;
margin: 0 0 1rem;
font-weight: 400;
text-overflow:
浏览 0提问于2019-01-14得票数 0
1回答
根据背景大小拉伸容器高度
、、、、
我知道有类似的问题，但这次略有不同。只需阅读说明即可)
我有一个主容器(红色)，它可以根据屏幕大小进行拉伸。在它的内部有第二个容器(蓝色)，在顶部有固定高度的div和背景图片。
一开始，我试着用background: cover做背景图片。但在某些尺寸下，背景的不同部分是看不到的，这是不可能的。
所以我想要实现的是让svg背景根据蓝色容器的宽度拉伸，并保持它的比例。此外，我希望第二个容器根据它的背景改变高度，这样整个svg图片将始终可见。
仅用css就可以实现吗？如果没有，那么我如何使用js来创建它呢？我无法更改现有的html。
浏览 3提问于2015-12-04得票数 0
5回答
我们的目标是让<svg>元素扩展到它的父容器的大小，在本例中是一个<div>，不管这个容器有多大或多小。
代码：
<style>
svg, #container{
height: 100%;
width: 100%;
}
</style>
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
<r
浏览 1提问于2012-01-19得票数 119
3回答
我有一个svg应该是100%的身体宽度，它工作在ie11，铬和火狐-但在safari有一些空间在两边的svg，我无法摆脱它。感谢您的任何帮助-请看这里的小提琴：
css：
body{margin:0;padding:0;background:orange;}
.top {position: absolute;width: 100%;}
.inner{height:0;position: relative;padding-top:3.2%;}
svg{height: 100%;display:block;width: 100%;position: absolute;top:0;left:0;}
浏览 3提问于2014-06-19得票数 6
回答已采纳
1回答
我有以下的html
<a class=logo></a>
我想把它换成我的标志。但我希望标志占据100%的垂直空间，以及水平空间的数量，这将使图像成比例
我可以试着做
.logo {
background-image: 'logo.svg';
background-size: auto 100%;
}
除非我仍然需要设置height和width才能占用空间。
我可以试着做
.logo:before {
content: url('logo.svg');
}
但设置图像高度和宽度的唯一方法是使用
zoom: X%
或
trans
浏览 2提问于2014-01-29得票数 0
2回答
我在div中有一个内联SVG元素，它可以缩放以适应浏览器窗口。当浏览器调整大小时，SVG图像也随之调整大小，以便所有图像都可见，并保持相同的比例。
然而，在IE9中，图像要小得多，并且不会调整大小。取下viewBox将图像缩放到完整大小，这太大了，它仍然不能调整大小。
我发现，通过设置包含div的宽度和高度，将使图像变大，但只使用固定像素，而不是我需要的100%。
显示了实际的问题(即它在Chrome上很好，但在IE9上不好)。调整框架边框的大小应该会调整图像的大小。
<div id="outer">
<svg viewBox="0 0 700
浏览 2提问于2012-08-07得票数 5
回答已采纳
我想包含页面标志和导航在同一个标题容器-标志在左边，导航容器在右边。如何使SVG徽标嵌入适当的线内比例，以始终填充其100%的集装箱(头)高度和自动比例尺宽度-同时留在集装箱的左边？(我需要单独的<div>包装<svg>容器吗？)
可能我必须设置svg viewBox属性，但我不知道如何做才能确保它能够响应并以不同的分辨率正确呈现)？
我的代码：
HTML：
<header id="page-header">
<svg id="logo"
xmlns="http://www.w3.o
浏览 0提问于2014-05-14得票数 2
回答已采纳
2回答
SVG被裁剪
、、、
所以我最近刚进入SVG，我遇到了一些问题，因为我没有调整大小以适应容器，相反，我的SVG映像被裁剪出来了。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Eye</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script sr
浏览 11提问于2016-01-28得票数 6
回答已采纳
1回答
我使用d3在angular2中制作了一个饼图组件，但在尝试向图表添加文本时遇到了问题。我可以在开发人员工具中看到元素资源管理器中的文本，但它没有显示在图表上。我有一种感觉，可能我正在做的事情真的很愚蠢，但我不知道是什么。我的代码如下。
showChart() {
let widthRatio = 4;
let heightRatio = 3;
let radius = Math.min(widthRatio, heightRatio) / 2;
let color = d3.scaleOrdinal(d3.schemeCategory20b);
le
浏览 19提问于2016-08-18得票数 1
回答已采纳
我在Polymaps中发现了一个bug，但还没有找到确切的原因。最近，我的本地副本Polymaps.js (2.5.1)不再显示容器的完整大小的地图，而是只显示300px x 150px的视图。我在Polymaps.org网站上也看到了这种行为。
CSS样式表具有：
div#map {
position: relative;
border: solid 4px #ccc;
background: #eee;
width: 1800px;
height: 800px;
}
HTML页面具有：
<div id="map"></div>
J
浏览 5提问于2014-08-22得票数 2
我试图为我的SVG实现以下目标：
part)centering响应( responsive )(在svg元素上使用viewBox，在svg元素上没有宽度/高度，这很好)的垂直和水平中心(硬，SVG应该保持原来的纵横比)。
我制作了一个用于演示的jsfiddle演示(因为内置的所以代码片段更容易导航)： (确保在设置下将编辑器布局设置为正确的结果，这使得通过拖动瓷砖分隔线来更改画布大小变得更容易)
正如你所看到的，画布位于最上面，它是水平填充整个视口的宽度，这使得它在技术上以水平为中心。此外，如果您单击按钮，黑色矩形将移动离开画布一半，这是我想要的行为。
现在，我尝试通过添加以下CSS (在js
浏览 0提问于2021-03-22得票数 0
回答已采纳
2回答
SVG封面父母
、、
我使用以下命令创建了一个svg标记：
var NS = "http://www.w3.org/2000/svg";
var elem = document.createElementNS(NS, "svg");
elem.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
elem.setAttribute("width", "100%");
e
浏览 7提问于2013-08-02得票数 0
回答已采纳
我正在使用SizeConfig方法来设置我的应用布局的高度和宽度，但是由于某些原因，在实现这些功能之后，布局显示为全部向左移动(即不是居中)。我不明白为什么会发生这种情况，特别是在没有SizeConfig函数的情况下，布局会居中。 有人知道这可能是什么原因吗？ class SubscribePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
SizeConfig().init(context);
final ThemeData theme = Theme.of(co
浏览 26提问于2019-09-23得票数 0
回答已采纳
1回答
我有一个动态大小的SVG元素。我想按需要将它及其内容缩放到，一个特定像素大小(而不是像素)。
这是无效的：
transform: scale(100px);
我对SVG的了解是中等的，所以也许有一个更好的方法，但是在绘制内容之后设置SVG元素的高度/宽度只会导致其内容被遍历，因为它们是“绝对的”而不是“相对的”路径。
有了JS，您就可以得到相对大小：
const scaleX = targetWidth / svg.offsetWidth;
const scaleY = targetHeight / svg.offsetHeight;
svg.style.scale = `${scaleX}p
浏览 4提问于2022-03-30得票数 2
回答已采纳
有人能解释火狐为什么要制作这个SVG图像吗？
它在一个容器内，并被CSS缩放以适应。
我正在使用<symbol>和<use>。
.container {
width: 1em;
height: 1em;
}
svg {
width: 100%;
height: 100%;
}
<svg style="display:none">
<symbol id="icon_triangleup" xmlns="http://www.w3.org/2000/svg" width="24
浏览 8提问于2017-01-19得票数 0
回答已采纳
2回答
我想把这张条形图缩小到它的容器大小。理想的情况是做一些像w= '100%'，h= '100%‘这样的事情。我可以这么做吗？
<div class="test" style="height:50px;width:100px;overflow:hidden"></div>
//Width and height
var w = 200,
h = 100,
barPadding = 1,
dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
浏览 2提问于2015-07-16得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
