设置Viewbox以使内联SVG“捕捉”到包含元素的大小？
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以通过设置Viewbox来实现内联SVG“捕捉”到包含元素的大小。
Viewbox是SVG中的一个属性，用于定义SVG元素的可视区域和坐标系统。通过设置Viewbox，可以控制SVG元素在父容器中的显示大小和位置。
要设置Viewbox以使内联SVG“捕捉”到包含元素的大小，可以按照以下步骤进行操作：
- 首先，确保SVG元素被正确嵌入到HTML文档中，并且可以通过CSS选择器或JavaScript获取到该元素。
- 获取包含SVG元素的父容器的大小。可以使用JavaScript的方法获取父容器的宽度和高度，例如使用
clientWidth和clientHeight属性。 - 根据父容器的大小，设置Viewbox属性的值。Viewbox属性的值是一个包含四个参数的字符串，分别表示可视区域的左上角x坐标、左上角y坐标、宽度和高度。可以根据父容器的大小来计算这些参数的值。
- 将计算得到的Viewbox属性值设置给SVG元素。可以使用JavaScript的方法将属性值设置给SVG元素，例如使用
setAttribute方法。
以下是一个示例代码，演示如何设置Viewbox以使内联SVG“捕捉”到包含元素的大小：
<!DOCTYPE html>
<html>
<head>
<style>
.svg-container {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div class="svg-container">
<svg id="my-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<!-- SVG内容 -->
</svg>
</div>
<script>
// 获取父容器的大小
var container = document.querySelector('.svg-container');
var containerWidth = container.clientWidth;
var containerHeight = container.clientHeight;
// 设置Viewbox属性值
var viewboxValue = '0 0 ' + containerWidth + ' ' + containerHeight;
// 设置Viewbox属性给SVG元素
var svgElement = document.getElementById('my-svg');
svgElement.setAttribute('viewBox', viewboxValue);
</script>
</body>
</html>在上述示例代码中，首先通过CSS设置了父容器的宽度和高度为300px和200px。然后使用JavaScript获取到父容器的宽度和高度，并计算得到Viewbox属性的值。最后将计算得到的Viewbox属性值设置给SVG元素。
通过以上步骤，就可以设置Viewbox以使内联SVG“捕捉”到包含元素的大小。这样，SVG元素将根据父容器的大小进行缩放和显示，确保完整地展示在父容器中。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云SVG图像处理：https://cloud.tencent.com/product/tci
- 腾讯云云服务器CVM：https://cloud.tencent.com/product/cvm
- 腾讯云云原生容器服务TKE：https://cloud.tencent.com/product/tke
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云存储COS：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云人工智能服务：https://cloud.tencent.com/product/ai
相关·内容
1回答
我希望SVG完全适合包含TD的内容。SVG的比例不需要保留。相反，当高度应该大于宽度时，SVG的高度与宽度相同。SVG的下方和上方都有填充。这就是我所拥有的：
<html>
<head>
<style>
table {
border-collapse:collapse;
}
.td-svg {
padding: 0px;
display: block;
}
.div-svg {
height: 100%;
display: block;
}
</style>
</head>
<body>
浏览 0提问于2015-11-18得票数 1
空的SVG (<svg></svg>)将呈现为300px×150px。我可以很容易地设置尺寸(比如<svg width="100" height="100"></svg>)。但是，为什么包含viewbox会将默认宽度更改为100%，将高度更改为宽度的75%？我测试了一个最小元素：<svg viewbox="100 100 200 150"></svg>尝试这个示例：
<html lang="en">
<head>
<style
浏览 2提问于2019-05-14得票数 0
3回答
按父div缩放svg
、、、、
我在DIV里有一个内联svg。如何使svg根据其父div的宽度增大/缩小？
它在IE中不起作用，但在chrome中起作用。当我在chrome中使用开发者工具时，我注意到了这一点：
我读到过setAttribute()方法可以用来调整svg的viewBox？
如何修复此问题以在IE中正常工作？
<div class="mainGA mainG">
<div class ="drgAM">
<svg viewBox="0 0 210 500"><polygon points=&#
浏览 0提问于2015-04-30得票数 1
2回答
我试图用javascript修改一个svg标签，使其可调整大小，但我的更改没有任何效果。我需要这样做的原因是这个标记是由一个我不能修改的库呈现的，因此似乎我唯一的选择就是用javascript修改svg。
我知道这个脚本生成的标记是正确的，因为我能够将标记复制到一个新的html文档中，并且它可以工作(我已经将它包含在示例代码中)，所以我似乎需要一些方法来强制svg认识到它已经被更改(或者修改svg的另一种方法)。
这是一个HTML页面，显示了我的问题：
<html>
<head>
<script src="http://code.j
浏览 0提问于2012-06-11得票数 13
回答已采纳
2回答
下面的代码将生成一个150像素高的表。为什么是150？这是SVG的怪癖还是更一般的？
<table class="root" cellspacing="0">
<tr>
<td>
<svg class="root-symbol" viewBox="0 0 5 6.5" preserveAspectRatio="none" style="height:100%;background-color:lightgreen;">
浏览 6提问于2016-04-17得票数 0
回答已采纳
我正在使用直接放入HTML文件中的SVG
<svg>
Contents...
</svg>
使用javascript/jQuery，我想向SVG添加一个属性
$("svg").attr("viewBox", "0 0 166 361");
以下是运行上述脚本后修改后的SVG
<svg viewbox="0 0 166 361">
Contents...
</svg>
请注意，它将viewBox而不是viewbox。因为viewbox (小写)不做任何事情，所以我需要它是v
浏览 1提问于2012-05-01得票数 25
回答已采纳
我知道我的错误是调整.attr("width", x)的大小，或者不计算.attr("viewBox", "0 0 " + x + " " + y )中的宽度。
如何修复我的代码，或者是否有其他工作解决方案？
工作代码：(初始页数)
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth - 170 || e.c
浏览 1提问于2013-11-16得票数 1
1回答
我试图使用svg.js ()呈现一个矩形，并且在调整父窗口/窗口的大小时不保留高宽比。它对于普通的svg元素很好，但对于svg.js元素则不行：
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js"></script>
<script type="text/javascript">
SVG.on(document, 'DOMContentLo
浏览 1提问于2018-03-06得票数 1
回答已采纳
我有一个按钮的元素。SVG片段内部链接到主体顶部的包含SVG文件。
<a href="#menu" class="head__toggle" title="Toggle Menu">
<svg viewBox="0 0 70.115 53.162" class="head__btn">
<use xlink:href="#skmenu"></use>
</svg>
</a>
当我向Codesniffer查询
浏览 0提问于2014-08-24得票数 1
1回答
我发现了这个问题，但答案(删除<svg>、width和height属性以及调整viewBox属性大小)没有正确地重新分配我的SVG文件。
这是我从购买的一个徽标文件，我想开始使用它，但是我很难理解如何重新调整它的大小。
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.
浏览 5提问于2022-07-12得票数 0
回答已采纳
我正在尝试创建一个SVG播放按钮，它只有按钮本身的大小，但似乎有某种类型的viewbox是自动生成的。这个phantom甚至与播放按钮的尺寸都不一样，似乎是2:1的比例。
#play-button {
border: 1px dashed gray;
}
<svg id="play-button">
<style type="text/css">
.st0{fill:none;stroke:#010101;stroke-miterlimit:10;}
.st1{fill:#010101;}
</style>
&
浏览 0提问于2016-10-15得票数 1
2回答
我在父框中有一个SVG图标。只要我开始向父级添加填充，SVG图标就会捕捉到靠近框底部的位置。你知道为什么吗？
相关html：
<div class="icon">
<svg viewBox="0 0 32 32" height="100%" width="100%">
<path id="gear" fill-rule="evenodd" d="..."></path>
</svg>
<
浏览 9提问于2014-06-25得票数 0
2回答
在example1中，下面是包含在html文档中的内联SVG代码片段。注意，viewbox="0 0 25 25"“放大”左上角的图像，使其看起来比第二个示例要大。
示例1
<svg
xmlns="http://www.w3.org/2000/svg"
width="200" height="200" viewbox="0 0 25 25"
>
<defs>
<style type="text/css">
.line-1 {
浏览 1提问于2017-08-08得票数 0
回答已采纳
我想从JavaScript函数中确定元素(即SVGSVGElement)的viewBox。呼叫：
svgElement.getAttribute("viewBox")
当在元素上显式设置viewBox时，效果很好。但我不能假设这种情况永远都会发生。例如，我想让我的函数在所有这些标签上工作：
(400, 100) <svg width=400 height=100></svg>
(400, 100) <svg width="400px" height="100px"></svg>
(400, 100)
浏览 1提问于2012-10-23得票数 2
2回答
基本上，我希望将SVG画布映射到-1.1，并在画布上打印一些文本。
没有请求映射的简单示例是：
<style>
.text {font: 14pt sans-serif; fill: red;}
</style>
<svg class="text" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="14pt">TEXT</text>
</
浏览 0提问于2020-05-07得票数 1
回答已采纳
2回答
AngularJS应用程序。
基本上，我必须做一个水平箭头样的绘图，图像将重复在里面，这取决于我发送到html的项目数组(ng-重复)。
我被告知最好的将是svg，所以我在这里，但我对svg的知识很低。所以我设法用固定的智慧和高度做了一支小箭。但现在我需要它大得多。
所以我在网上读到了关于viewBox的文章。它缩放了我在SVG中的项目，但是到目前为止我有两个问题。
图像不起作用。
所有的物品都是堆叠起来的，不要跟在它们之间的空隙里，就像我以前一样。
这段代码是我现在的工作代码，所以您可以了解我想要绘制的元素。我使用这个元素，这样我就可以用工具提示和文本来重复它，这段代码被简化
浏览 0提问于2019-03-12得票数 1
回答已采纳
我有两个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
回答已采纳
如何在object标签中以与原始比例不同的比例显示SVG图像？
例如，如果我有一个SVG文件另存为example.svg：
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"
浏览 0提问于2013-05-16得票数 1
2回答
如何使SVG中的路径扩展到svg的100%宽度和高度？我在试着把蓝色容器里的黑叶展开。
<div style="background-color: red;">
<svg viewBox="0 0 2000 4000" style="background-color: blue; align-content: center;">
<path
d="M292.724 23.7046 C547.323 146.803 192.925 436.042 192.925 436.042 C1
浏览 13提问于2022-10-12得票数 0
我已经尝试了svg参数的许多变体，但是在缩放这个特定的SVG时，我没有遇到过joy。
我正在尝试将包含到一个容器元素中，该元素控制SVG的大小。
我的目标是500x309px。
哪种width、height、viewBox和preserveAspectRatio的组合可以帮助我在不遮盖或裁剪SVG的情况下实现这一点？
浏览 1提问于2012-03-05得票数 74
回答已采纳
我有以下SVG文件：
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100%" height="19">
<rect x="0" y="0" width="100%" height="100%" fill="black"
浏览 0提问于2018-12-14得票数 0
回答已采纳
我使用snap.svg (来自snapsvg.io的jQuery插件)将snap.svg图像加载到我的网站中，这只会加载到我的备份所在的图像中，并使某些元素具有动画性，而不会丢失html中的结构。
我面临的问题是这些图像不会在旧的浏览器上缩放(例如IE9、IE10、Safari 6)。
svg属性：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x=&#
浏览 0提问于2016-11-01得票数 0
回答已采纳
左列中的svg在页面加载时“跳转”。当你第一次使用时，由于某种奇怪的原因，它会放大到很大，然后缩小到正确的大小。我该如何解决这个问题呢？
我试过从高度百分比到vh的所有方法。我需要弄乱viewbox吗？谢谢你的帮助。
浏览 27提问于2017-08-05得票数 6
回答已采纳
如何使用2+普通CSS、HTML或JS更改角材质设计中SVG图标的大小？
如果我在HTML元素中指定了图标，那么样式设计工作得很好：
<mat-icon style="font-size: 16px !important">home</mat-icon>
但是，当我使用svgIcon属性(例如，如果使用第三方图标库)时，无法调整图标的大小：
<mat-icon style="font-size: 16px !important" svgIcon="home"></mat-icon>
我知道SVG的扩
浏览 0提问于2018-02-13得票数 12
回答已采纳
我想让一个内联SVG填充整个浏览器窗口的宽度。SVG包含viewBox之外的一些内容。这是SVG文件：
当我将宽度设置为100%时，viewBox外部的内容变得可见：
svg {
width: 100%;
}
看到这个viewBox：红色的矩形是jsfiddle的边界。
我想要的是让SVG的viewBox水平填充整个浏览器窗口，而不显示viewBox之外的内容。这有可能吗？
浏览 5提问于2017-01-23得票数 2
有助于理解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回答
因此，我一直在尝试创建和SVG文本标志，显示一个“嵌入”的mpg4在字母中。起初，我使用Adobe Illustrator创建了我的徽标的SVG，虽然这给了我一个很好的100%宽度的响应式徽标，但我不能以任何方式在SVG中包含视频元素。
所以现在我得到了一个Didot网页字体，并且只使用了一个text SVG，我从F12工具中复制并粘贴了这个演示的代码：
我现在正在尝试做的是弄清楚如何使这个标志更大和100%的宽度响应屏幕宽度的变化。
当我编辑CSS类.wrap的SVG时，我可以得到更大的文本，但是font:本身有一个固定的宽度，它切断了大屏幕设备上的文本，我弄不清楚。我不认为这与视频的自然宽
浏览 0提问于2015-10-11得票数 0
我有这个svg：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 ' + size + ' ' + size +'" width="'+ boxW +'" height="'+ boxH +'">
<text>Sample Text</text>
</svg>
size：viewBox创建包装器所需的参数。
浏览 0提问于2018-10-31得票数 0
我有一个包含SVG的HTML页面。我知道我想以编程方式将HTML元素(准确地说是输入元素)放在SVG之上。
我得到了元素在SVG宽度和高度中所占百分比的所需位置。
如何将元素添加到该位置？
我的一个想法是，在SVG周围创建一个与我的尺寸完全相同的div：
<div ...>
<svg>...</svg>
<input style="top:10%..."/>
...
</div>
但是对于这种情况，外部div必须具有与SVG完全相同的尺寸，而我不知道如何做到这一点。SVG只有一个宽度，没有“vi
浏览 9提问于2017-07-24得票数 3
2回答
我希望能够将SVG元素上的笔划宽度设置为“像素感知”，即始终为1px宽，而不管当前应用的缩放转换是什么。我知道这很可能是不可能的，因为SVG的全部要点是独立于像素。
上下文如下：
我有一个设置了viewBox和preserveAspectRatio属性的SVG元素。它看起来像这样
<svg version="1.1" baseProfile="full"
viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"
xmlns="htt
浏览 2提问于2009-08-20得票数 120
回答已采纳
1回答
我有这段代码，你可以在下面的代码片段中运行它。我的问题是，在我的生产环境中，我有两个SVG，一个在另一个之上，每个都包含各种内容。当用户单击标题的任意一侧时，如代码片段中所示，顶部的SVG应该增大或缩小，以或多或少地显示下面的SVG (我知道对于可能绘制在下面的SVG，这可能不是很好的表现-但我的问题可能涉及到这一点，因为答案可能与我对SVG viewbox缺乏理解有关)。 问题是，因为我希望图像内容与顶部的SVG保持相同的大小，所以我决定使用Greensock来对宽度和viewbox的增长/收缩进行动画处理。然而，这会导致非常糟糕的故障-在代码片段中，运行代码并单击黑框(特别要注意图像的左
浏览 19提问于2020-06-18得票数 0
回答已采纳
在线SVG基础课程的代码：
<body class="site">
<figure class="theimage">
<svg id="custom-shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<defs>
<radialGradient id="sky" cx=".7&
浏览 1提问于2018-02-14得票数 2
回答已采纳
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
我有下面的代码块(我从svg中删除了路径，所以不要介意)
<div class="c-svg">
<svg xmlns="http://www.w3.org/2000/svg" class="ie-svg" viewBox="0 0 20 20" width="35" height="35" data-name="Layer 1"><path></svg>
</div>
它有以下类
.c-svg svg {
浏览 3提问于2021-03-05得票数 0
回答已采纳
2回答
下面我有一个非常简单的svg；
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">
<g stroke="#ccc">
<line x1="133" y1="50" x2="140" y2="40" stroke-width="2"
浏览 9提问于2016-04-04得票数 0
回答已采纳
试图获得HTML页面的布局，其中包含如下的flex框
[navigation] [[button][stretchable svg][button]]
为了使导航和按钮占用所需的空间，可伸缩的svg得到其余的空间，我被迫给可伸缩的svg一个width="1"或另一个小数字，因为否则行将被包装成：
[navigation]
[[button][stretchable svg][button]]
问题：为什么width="..."需要确保第二个块不被包装到下一行？
下面是的代码供参考：
<div class="navi">
<
浏览 4提问于2020-12-26得票数 0
回答已采纳
2回答
我有一个SVG元素，里面有很多元素。SVG-元素有一个viewbox，所以您可以按一个缩放按钮，这些元素看起来更大或更小。效果很好。现在的问题是，当元素溢出父SVG-元素时，不会出现ScrollBars。
示例：
<div width="100%" height="100%">
<svg height="100%" width="100%" style="overflow-x: auto; overflow-y: auto; "viewBox="0 0 793 1122">
浏览 5提问于2011-12-01得票数 37
我在一个Laravel项目中工作，其中SVG图标的文件被包括在刀片模板中。文件中的每个SVG都由一个<symbol>定义。我将单个图标呈现为：
<svg viewBox="0 0 150 150"><use href="#icon-i-want"></use></svg>。
这很好用，但是SVG是用Adobe Illustrator制作的，他们有这些自动生成的类，比如，.st0，.st1。这些类包含像fill或stroke这样的属性。例如：
.st0{fill:#2595FF;} <line cl
浏览 0提问于2017-10-21得票数 3
我正在努力理解<text>在svg中的定位。
假设您有<svg viewBox="..."><text>...</text></svg>，其中viewBox的大小是正确的，以适应其(已知的)字体、字体大小和字体大小。如果不给<text>一个x="..." y="..."翻译，它就不会在viewBox中“正确”地定位:它会太高，稍微偏右。
我可以计算那些x和y翻译值吗？如果转换不依赖于字体的特性，则可以不分析绘制的<text>，如果它确实依赖于字体的特性，则不分析绘
浏览 3提问于2016-06-16得票数 0
回答已采纳
为什么将svg viewBox设置为0 0 1 1会导致过滤器消失？我还试着使用x、y、height和width属性，以及更改primitiveUnits属性，但没有什么效果。任何帮助都将不胜感激。
svg {
border: 1px solid red;
height: 100px;
width: 100px;
}
svg circle {
fill: black;
}
<html>
<body>
<svg viewBox="0 0 1 1">
<defs>
<
浏览 4提问于2022-03-07得票数 0
回答已采纳
1回答
SVG D3图像大小调整问题
、、、、
我有一个使用d3创建的SVG图像。我希望将svg图像包含在其父div容器中。然而，svg超越了父div。下面是我的代码：
<div id="test" style="{width: 500px; height:500px;}">
<svg></svg>
</div>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
浏览 3提问于2017-11-29得票数 1
1回答
我有一个程序(基于Java)从数据中生成SVG。用户可以上传他们自己的SVG，这样他们就可以用于我在最终SVG图像中使用的图标和标记。
这是如何工作的，我有一个更大的矩形，我取代了SVG提供的.
<svg xmlns="http://www.w3.org/2000/svg" height="176" version="1.1" viewbox="0 0 264 176" width="264">
<!-- my own stuff -->
<rect x="50&#
浏览 0提问于2018-04-28得票数 0
2回答
我需要从JavaScript获取一个SVG的屏幕上的尺寸。
我的SVG上没有任何“变换”或“缩放”(变换、缩放)。唯一改变的是viewBox，它将改变SVG中所有元素的大小。
我一直在使用myPath.getBBox()，即使我更改了我的viewBox，返回的宽度也保持不变。
所以我想知道这个viewBox和路径的大小有什么关系。也许有一个函数可以计算宽度？
浏览 1提问于2011-08-12得票数 26
回答已采纳
2回答
.player
{
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><line x1='1' y1='1' x2='9' y2='9' stroke='red'/><line x1='1' y1='9' x2='9' y2=&#
浏览 3提问于2015-07-30得票数 0
1回答
有什么地方可以上传图标并获得SVG字符串向量吗？
另外，下面代码中的标记是什么？<g> <path>和viewBox，data-original，xmlns，d标记是什么？
最近，这种性能是否值得使用SVG代替常规图标？
<svg viewBox="0 0 512 512">
<g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path d="M0 0h128v128H0zm0 0M192 0h
浏览 1提问于2022-04-25得票数 1
回答已采纳
为什么浏览器会显示这是否作为SVG元素嵌入到html中，而不是SVG单独存储的情况。在这两种情况下都会显示线条： <svg version ="1.1" class="scaling-svg" viewbox="0 0 840 840" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <TEXT xmlns="http://www.w3.org/2000/svg" x=
浏览 35提问于2021-07-16得票数 0
回答已采纳
4回答
我正在尝试操作svg的'viewBox‘属性，它看起来像这样：
<svg viewBox="0 0 100 200" width="100" ...> ... </svg>
使用
$("svg").attr("viewBox","...");
但是，这会在名为"viewbox“的元素中创建一个新属性。注意小写字母而不是预期的camelCase。有没有其他我应该使用的功能？
浏览 0提问于2012-09-11得票数 25
回答已采纳
1回答
我有一个div元素，它包含一个svg图(一堆圆和边)，我还在svg元素上设置了viewBox属性。图中节点和边的坐标在px中针对指定的屏幕大小(因此也针对指定的div大小)进行了硬编码。使用所需的div大小，图形可以很好地加载，并且还可以在调整浏览器窗口大小时上下缩放。
但是，每当页面在不同的屏幕/div大小下加载时，我的问题就会出现，因为之前指定的div大小的svg图像保持不变。这会创建一个对于较小的浏览器/屏幕尺寸来说太大的图像。
我为svg元素设置了以下内容：
<svg id="mygraph" preserveAspectRatio="xMidYMid m
浏览 2提问于2012-09-04得票数 0
回答已采纳
2回答
我正在尝试使用像Two.js或SVG.js这样的SVG库，并动态地更改它们的动态生成的SVG元素，以便使它们具有响应性。这里有一个基本的示例，展示了预定义的内联SVG如何响应。
它涉及到将SVG元素包装在容器中、分配一些CSS值、添加viewBox和preserveAspectRatio属性。这似乎是做响应式SVG元素的常用方法：
<div class='container'>
<div class='svg-container'>
<svg version="1.1" viewBox=&#
浏览 1提问于2014-05-17得票数 0
我有一个内联<SVG>，它定义它的viewBox，但不定义它的height或width。我曾经在创建SVG时将width/height设置为与viewBox相同的值；好处是最终的图像缩放到SVG的自然单位，这是我想要的；问题是固定的width/height可能会使最终页面中的父容器溢出。从<SVG>中删除SVG会使图像渲染到父容器允许的最大尺寸，这几乎总是大于width/height的自然单位。
有没有一种方法可以将<SVG>缩放到它的自然单位，然后再缩小它(!)如果父容器太小？
浏览 2提问于2018-07-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
