使用viewbox的响应式SVG
是一种在网页中展示可缩放矢量图形（Scalable Vector Graphics，SVG）的方法。SVG是一种基于XML的图像格式，它使用矢量图形描述图像，可以无损地缩放和调整大小，适应不同的屏幕尺寸和设备。
Viewbox是SVG中的一个属性，用于定义SVG元素的可见区域和缩放比例。通过设置viewbox属性，可以实现响应式的SVG图像，使其在不同的屏幕尺寸下自动适应并保持良好的显示效果。
具体来说，使用viewbox的响应式SVG可以实现以下效果：
- 自适应缩放：通过设置viewbox属性，SVG图像可以根据父容器的大小自动缩放，保持图像的比例和清晰度。
- 响应式布局：SVG图像可以根据屏幕尺寸和设备类型进行自适应布局，确保在不同的设备上都能良好地显示。
- 交互性：SVG图像可以添加交互性元素，如按钮、链接等，使用户能够与图像进行互动。
- 动画效果：SVG图像可以使用CSS或JavaScript实现各种动画效果，增强用户体验。
- 矢量图形：SVG图像使用矢量图形描述，可以无损地缩放和调整大小，不会失真，适用于各种分辨率的屏幕。
- 支持文本和样式：SVG图像可以包含文本和样式信息，使得图像可以进行文本搜索和样式修改。
在腾讯云的产品中，可以使用腾讯云对象存储（COS）来存储和管理SVG图像文件。腾讯云COS是一种高可用、高可靠、低成本的云存储服务，可以满足各种规模的存储需求。您可以通过以下链接了解更多关于腾讯云COS的信息：腾讯云对象存储（COS）
同时，腾讯云还提供了云服务器（CVM）和云函数（SCF）等计算服务，可以用于部署和运行与SVG图像相关的应用程序。您可以通过以下链接了解更多关于腾讯云CVM和SCF的信息：
总之，使用viewbox的响应式SVG可以实现灵活、可缩放的图像展示效果，适用于各种网页和移动应用的设计和开发。
相关·内容
1回答
我正在做一个svg平面布局，用户应该能够放大和缩小。
当我第一次编写它的时候，缩放特性起作用了，但是svg对容器大小没有响应。我添加了viewbox属性以使其具有响应性，但这会干扰缩放功能-即使您尝试缩小，它也会放大，并且缩放不会像添加viewbox之前那样工作。
以下是演示该问题的两个代码：
Codepen 1
没有viewbox - svg可以正确缩放，但不响应容器大小
唯一的区别在于开始的svg标记：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xl
浏览 1提问于2018-05-27得票数 1
我已经从Adobe Illustrator生成了一个简单的。当我在浏览器中打开这个.svg文件并调整浏览器窗口的大小时，它对高度和宽度都有响应。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1
浏览 10提问于2018-01-20得票数 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
回答已采纳
1回答
使用viewbox的响应式SVG
、、、、
我已经设法使SVG响应，使用viewbox如下所示： var svg = d3.select("#vis").append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", "0 0 960 500")
.attr("preserveAspectRatio",
浏览 22提问于2018-12-26得票数 1
回答已采纳
如何使SVG viewBox用户坐标系与SVG自身提供的视点坐标系(height=为100%，width=为100%)一致？
我需要为我正在做的一个项目做这个特殊的情况，SVG元素应该是响应性的，但我们仍然需要在SVG本身上保持高度和宽度100%。
所以，我需要这样的东西：
<svg height="100%" width="100%" viewBox="0, 0, 100%, 100%">
<circle cx="25" cy="25" r="20" stroke="
浏览 1提问于2018-05-03得票数 10
4回答
我正在使用以下代码设置一个响应式SVG
outerHeight = 400;
outerWidth = 600;
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = outerWidth - margin.left - margin.right,
height = outerHeight - margin.top - margin.bottom;
var svg = d3.select("div#simulation-1&
浏览 0提问于2015-06-22得票数 10
我注意到，在各种示例中，SVG是有响应的(根据窗口大小的变化而改变大小)，有时在使用viewbox / preserveAspectRatio时不会响应。这里有一个非常简单的例子。像其他示例一样，我在SVG元素上使用viewbox和preseverAspectiRatio，但它没有响应，为什么？ <html>
<meta charset="utf-8">
<body>
<div id ="chart"></div>
<script src="https://cdnjs.cloudfla
浏览 16提问于2019-05-02得票数 1
回答已采纳
1回答
我有一个代码，我想让它响应。它有一个图像作为背景，上面有svg三角形，与图像中心重合。但是它没有反应。为了使其具有响应性，图像变小了，但svg保持不变。 三角形是svg，其余的是背景。 ? #wheelOfLife {
width: 500px;
height: 500px;
float: center;
padding: 50px;
background-color: aqua;
margin: auto;
background: url("https://www.coachinguniverset.dk/wp-con
浏览 8提问于2020-07-02得票数 0
1回答
在具有背景的元素上(图像或纯色实际上并不重要)：
<header id="block-header"></header>
我正在尝试使用SVG应用剪辑路径。为了实现这一点，我将SVG内联到相同的元素中，如下所示：
<header id="block-header">
…
<svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none">
浏览 0提问于2015-02-04得票数 15
回答已采纳
2回答
我有一个ReactJS组件： class OneComponent extends React.Component {
constructor(props_) {
super(props_);
this.width = 600;
this.height = 600;
this.viewBox = "0 0 600 600";
this.preserveAspectRatio = "xMidYMid meet";
this.responsive = true;
浏览 16提问于2020-08-16得票数 0
回答已采纳
1回答
我试图在响应性d3.js图表中保持文本元素的大小。
我已经在svg元素上设置了viewBox和preserveAspectRatio属性以获得响应性，但是这扩展了包括文本在内的所有svg元素。我尝试将字体大小设置为属性和CSS，但是文本元素继续与图表的其余部分一起缩放。
响应是通过以下方式完成的：
.attr("width", '100%')
.attr("height", '100%')
.attr('viewBox','0 0 600 300')
.attr('preserveAspec
浏览 1提问于2019-04-02得票数 3
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
回答已采纳
我必须在平板电脑、桌面显示器以及在某些情况下非常大的d3高分辨率影院尺寸显示器上构建工作良好的4k+可视化。
因此，我正在试图找出在使用SVG的'viewBox‘属性与使用’_(_大多数例子，比如这个博客条目()，都建议我在后一篇文章中这样做：
d3.select(window).on('resize', resize)
resize() {
// rerender each individual element with the new width+height of the parent node
d3.select('svg')
.attr(&
浏览 4提问于2016-03-03得票数 15
回答已采纳
1回答
我正在研究如何以一种响应式的方式添加外部SVG文件，并爱上了，因为它不需要JavaScript。
( SVG已经使用冲刷进行了“清洗”，因此剥离了高度/宽度属性，并按照建议添加了viewBox。)
问题是，这种技术似乎需要在image标记上使用height和width属性才能起作用，但该标记没有响应。建议的语法为：
<svg width="200px" height="100px">
<image xlink:href="logo.svg" src="logo.png" width="200px&
浏览 1提问于2014-01-29得票数 1
我正在尝试让d3 chart更具响应性。所以我使用了带像素值的viewbox，但是它不能工作，请检查这个。如果我将width和height设置为100%，如下所示，那么它将响应check
var svg = d3.select('.chart-container').append("svg")
.attr("width", '100%')
.attr("height", '100%')
.attr('viewBox','0 0
浏览 0提问于2014-04-28得票数 2
1回答
我试图在不改变网格工作方式的情况下删除svg。
svgs用于实现所有平铺的纵横比为1。
编辑:似乎有一个CSS解决方案。
只需为我的磁贴设置aspect-ratio: 1即可。
这似乎真的很新，除了使用svg hack之外，还有其他解决方案吗？
body>div {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
min-width: 700px
}
div div {
background: red;
}
<div>
浏览 0提问于2021-09-13得票数 0
我知道我的错误是调整.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
我想出了两种使SVG中的元素相对于SVG的父元素或SVG本身具有响应大小的方法(SVG的高度是100% )：
使用CSS变量更改CSS中的高度
- **Works in Firefox but not Chrome, and I have no idea why?**
通过获取SVG的父级高度来更改JS中的高度
- Works in Firefox and Chrome, but as much as possible I would like the resizing logic to be all in one place (i.e. CSS
浏览 2提问于2021-10-21得票数 1
回答已采纳
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
1回答
如何滑动响应SVG滑块？
、、、
我做了这个SVG滑块。
当在底部的红色条形上盘旋时，彩虹矩形 #moveSVG应该从右到左滑动，反之亦然。这很好，但前提是我没有让#moveSVG响应。
当我使SVG 响应时..。
。。删除width和height并使用css、100vw和100vh设置
。。添加viewBox="0 0 5200 900" preserveAspectRatio="xMinYMax slice"
..it不再起作用了。这个长方形是切片的。(见片段)
现在我如何使这个响应滑块不切片它？
有两种解决方案我不愿使用：
不用将transform设置为transla
浏览 1提问于2017-12-16得票数 0
回答已采纳
1回答
从xml响应中获取svg元素
、、、、
当我试图访问响应xml时，我得到了错误。我想首先访问svg，然后获取svg viewbox的高度和宽度或其他方式。如何从响应xml访问svg以获得高度和宽度？
我想使用javascript (可能是jquery)访问高度和宽度，如下所示：
this._imageW = jQuery(".SVGImage").width()；this._imageH = jQuery(".SVGImage").height()；
我使用一种方法下载该文件，然后以xml格式给出响应。idk如何使用xml响应思想访问元素。
这就是上面的回答。我在控制台中试过了，但不起作用
浏览 3提问于2016-02-03得票数 0
2回答
让我们从我想要达到的最终结果开始：
平行四边形的长度和高度可以相互独立地变化，但边的角度不变化的地方。
让我们来谈谈为什么我已经做了什么。
我对SVG相当缺乏经验，但我已经知道CSS还不足以完成我想做的事情，这就是使响应按钮看起来类似于上面的图像--只是有时左侧或右侧是直的。
最初，我设计了一个非常宽的SVG，它可以用作背景，然后向上缩放并对齐到左或右(作为背景)，这样多余的部分就会被切断，但是纵横比不会改变。由于某些原因，我没有花费任何时间进行调试，这并不像设计的那样工作。
然后，我更多地了解了SVG和preserveAspectRatio。我使用了这个漂亮的特性来使SVG本身具有
浏览 1提问于2015-09-23得票数 1
1回答
this.svgCanvas = Snap("#svg")；
this.svgCanvas.attr({ viewBox："0 0 236 236"})；
对于所有其他浏览器，它将在设置视图框之后进行响应。我正在使用IE11，它将不会响应。高度始终固定为某个较小的值。因此，有时svg图像会被裁剪。
浏览 2提问于2017-11-17得票数 0
2回答
如何更改g元素的高度？ height = {params} doesn't want to react 我在评论中抛弃了我的工作，因为svg非常大(Scene.js) {/* Scale man */}
<g transform="translate(320,388)" viewBox="0 0 351 450">
<g transform={`translate(336,0) scale(-1, 1)`}>
<g transform="translate(30.25
浏览 138提问于2021-06-16得票数 -1
1回答
我需要使我的d3 js图表具有响应性，即当用户调整窗口大小时缩放图表。我尝试使用svg的属性"viewbox“和"preserveaspectratio”，但没有成功。这是我的
var svg = d3.select("#chart1").append("svg")
.call(zoom)
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("heig
浏览 0提问于2018-10-12得票数 0
我有一个嵌套的SVG，有3个元素。两个三角形位于左右两侧，中间有一条线。我想获得一条响应线(线应该只有在三角形之间的宽度)，当水平和垂直调整大小时。我试过用百分比来设置宽度，但只在水平调整大小时有效。当我垂直调整大小时，它不起作用，因为三角形的宽度改变了。这是一个代码链接：https://codepen.io/roppazvan/pen/dyyPKKL?editors=1100 <svg
class='input-source'
stroke='black'
stroke-width='0&
浏览 10提问于2019-10-08得票数 3
回答已采纳
我试图在我正在开发的应用程序中使用渐变，但我遇到了一个问题。我特别使用userSpaceOnUse，因为我希望它能够均匀地应用到SVG中。但是，当我嵌套SVG时，梯度不再均匀地应用。如果您检查我添加的代码段，您可以看到这个操作。
我已经玩过了，我认为这可能与viewBox有关，但我一直无法修复它。
能解决这个问题吗？使用我添加的示例，我希望嵌套的SVG完全匹配它后面的rect。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<defs>
<lin
浏览 4提问于2022-03-04得票数 0
回答已采纳
2回答
实现如下所示的响应性SVG元素是非常直接的。
<div id="chartId"/>
var svg = d3.select("#chartId")
.append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 600 400");
svg.append("rect")
浏览 3提问于2016-01-07得票数 2
1回答
我有不同的定制SVG。每个SVG都有自己的viewBox。
第一Svg
<svg viewBox="-4 -4 24 24"><path something/></svg>
第二次Svg
<svg viewBox="-5 -7 24 24"><path something/></svg>
第三代Svg
<svg viewBox="-2 -1 24 24"><path something/></svg>
等等..。
我正在使用Material
浏览 2提问于2020-10-27得票数 0
2回答
使svg缩放到全屏大小
、、、
我正在尝试将svg缩放到浏览器窗口的完整大小。svg对象在一个高度和宽度都设置为100%的div中，我曾尝试使用svg中的viewBox，但都无济于事。
我正在使用的屏幕分辨率为1080p。
<div style="width:100%; height: 100%;">
<object id="map" type="image/svg+xml" data="worldHigh.svg">Your browser does not support SVG</object>
浏览 0提问于2014-09-05得票数 2
回答已采纳
我试图将<svg>标记与可选属性viewBox相匹配，并提取其值。我想匹配<svg>标记的以下所有变体：
<svg width="28" height="32" viewBox="0 0 28 32">
<!-- svg content must be grouped -->
</svg>
<svg viewBox="0 0 28 32">
<!-- svg content must be grouped -->
</svg>
&
浏览 1提问于2021-04-04得票数 3
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
我有一个Safari、SVG和flexbox的问题 我们的目标是有一个响应式的SVG，保持宽高比(16:9)。此外，SVG应该始终位于屏幕的垂直和水平中心。以下代码适用于除Safari之外的所有浏览器。我尝试了不同的供应商前缀，但我不知道为什么SVG没有出现...有什么想法吗？ 您可以在下面的代码片段中测试有缺陷的行为。Safari将显示一个空白页面。其他浏览器将显示一个16:9，始终居中的蓝绿色矩形。 * {
margin: 0;
padding: 0;
overflow: hidden;
}
body {
height: 100vh;
display: flex
浏览 78提问于2021-03-25得票数 2
回答已采纳
当我在DOM中已经存在的SVG元素上使用setAttribute('viewBox')时，它被正确设置(带有大写的'b')。
当我在JavaScript中创建SVG元素并在其中添加'viewBox‘属性时。。。它在DOM中以全小写字母结束。
为什么会这样呢？
document.querySelector('#circle svg').setAttribute('viewBox', '190 190 20 20');
let svg = document.createElement('svg&#
浏览 13提问于2017-02-01得票数 1
回答已采纳
我正在尝试设计一个SVG标志，它由几个矩形组成，横跨100%的水平可用屏幕，中间有一个SVG徽标。我希望它是响应，除了中间的徽标，我在所有地方都使用百分比，为此我使用和SVG内联代码，而不是百分比。我不能让徽标缩放或居中。下面是一个HTML文件中的SVG的精简版本。 ` <svg xmlns="http://www.w3.org/TR/SVG11" width="100%" height="100%"
viewBox="0% 0% 100% 100%" >
<rect x="0&a
浏览 14提问于2019-03-13得票数 0
1回答
我想让我的页面的全尺寸SVG响应。这意味着: 100%的宽度和高度应该调整。显然没有正确选择路径，因为即使我这样做了：
rsr.setViewBox(0, 0, 2560, 1440, true); //or 1920 and 1080
rsr.setSize("100%", "100%");
内部的实际内容没有调整大小。SVG被调整大小，ViewBox被调整大小，但是没有任何内容被调整大小。在不更改SVG文件中的实际路径的情况下，我将如何使它响应？这里可以看到这样的例子：
浏览 4提问于2017-11-09得票数 0
回答已采纳
1回答
tl;dr：给定任意的SVG <path>，如何调整路径命令以设置文件的新来源？
详细信息
我正在使用创建用于Android的矢量图形。Illustrator有 ，在(未知)情况下，为图形创建的viewBox和所有坐标与您为画布和画布中的对象设置的坐标不匹配。而不是(例如) viewBox="-7 0 14 20"，您可能会得到viewBox="-53 75 14 20"。通常，path命令将被转换为适合于该viewBox。有时候甚至都失败了。
在普通的SVG文件(a)中，这很少被注意到，(b)通过将所有内容包装在根级别的<g transfor
浏览 7提问于2015-11-05得票数 1
回答已采纳
我有一个svg元素，我试图使它响应。下面给出了我正在使用的代码，但这不起作用。我不明白这个问题。
var svg = d3.select('.chart')
.append('svg')
.attr('class', 'chart')
.attr("width", width + margin + margin)
.attr("height", height + margin + margin + 10
浏览 5提问于2017-10-26得票数 0
回答已采纳
1回答
动态创建多个SVG响应
、、、、
我为标题创建了svg元素。我用jQuery动态地创建这些元素。我想在不同的地方使用这个元素，我希望他们能够响应。当我使用$(window).resize函数时，浏览器会被卡住。
这是我的代码：
function widgetTitle() {
$(".title-svg").each(function(i, item) {
item = $(item);
$(".svgWidget", item).css("width", item.width() + 17);
var a = ite
浏览 5提问于2017-09-20得票数 0
1回答
这与反应无关。这是关于反应图表的。
当数据源发生变化时，我实现了ngOnChanges方法来更新图表：
ngOnChanges(changes: SimpleChanges) {
if (changes.data) {
this.createChart(changes.data.currentValue);
}
}
很有魅力除了..。图表heigth应该是动态的，我的意思是，增长或缩小取决于changes.data.length (更多的数据，更多的行要渲染)。我不限制容器元素中的svg元素大小。
我是这样构建<svg>根元素的：
const viewBoxHeig
浏览 1提问于2020-02-20得票数 0
在本例中，绿色圆圈被切断。
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1" style="background-color: pink" viewBox="-300 -300 500 500">
<svg width="500" height="500" x="0" y=
浏览 1提问于2012-02-06得票数 4
回答已采纳
我想让一个内联SVG填充整个浏览器窗口的宽度。SVG包含viewBox之外的一些内容。这是SVG文件：
当我将宽度设置为100%时，viewBox外部的内容变得可见：
svg {
width: 100%;
}
看到这个viewBox：红色的矩形是jsfiddle的边界。
我想要的是让SVG的viewBox水平填充整个浏览器窗口，而不显示viewBox之外的内容。这有可能吗？
浏览 5提问于2017-01-23得票数 2
问：，我如何使用viewBox坐标系，同时仍然完全填充viewPort，并保持高宽比？
我刚开始使用svg编程，所以希望我只是误解了一个基本概念。
我想要创建一个交互式和响应性的地图，基于背景图像，用户上传。
下面是我要开始工作的基本示例()：
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200px"
height=&
浏览 3提问于2015-07-15得票数 2
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
我使用SVG文件本身中的preserveAspectRatio和viewBox属性创建了一个可伸缩的SVG对象：
<svg
…
width="800"
height="800"
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 800 800"
…
在HTML中，我使用<object>标记引用SVG文件，并将其包装为<a>标记(我希望这样做，以便以后可以对其进行样式设置)：
<a>
<object type=
浏览 2提问于2014-03-24得票数 6
回答已采纳
1回答
我尝试用SVG在Firefox中遮罩图像。图像是响应性的，所以蒙版也应该是响应性的。
有了一个简单的SVG圆形掩码以及属性maskUnits="objectBoundingBox"和maskContentUnits="objectBoundingBox"，SVG掩码就可以按预期工作。请参阅此。
但是，当我从Illustrator中导出路径并以与简单SVG圆形蒙版相同的方式包含它时，它不起作用。当我删除maskUnits="objectBoundingBox"和maskContentUnits="objectBoundingBox"
浏览 0提问于2016-04-26得票数 2
4回答
我正在尝试操作svg的'viewBox‘属性，它看起来像这样：
<svg viewBox="0 0 100 200" width="100" ...> ... </svg>
使用
$("svg").attr("viewBox","...");
但是，这会在名为"viewbox“的元素中创建一个新属性。注意小写字母而不是预期的camelCase。有没有其他我应该使用的功能？
浏览 0提问于2012-09-11得票数 25
回答已采纳
1回答
加载一个比原来分辨率更小的SVG会对你的SEO产生影响吗？
例如：
index.html：
<img src="test.svg" width="10" height="10"/>
test.svg (原始尺寸: 150x150)：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle r="32" cx="35" cy="65" fill=&#
浏览 0提问于2018-05-29得票数 4
1回答
从中心抓取和移动图元
、、、
我想知道我在下面的代码中做错了什么。
SVG已经被放大和平移，元素在垂直方向上拖动得很好，但是在时间方向上它变得疯狂了。
const svg = document.getElementsByTagName( "svg" )[ 0 ];
const w = svg.getAttribute( "width" );
const h = svg.getAttribute( "height" );
const cry = document.getElementById( "cry" );
const reg = /\d*\.\d[^\s
浏览 0提问于2017-02-25得票数 1
回答已采纳
1回答
排列背景SVG
、、
我试图用3张svg图片创建一个响应式的背景，但我在组织它们时遇到了麻烦。
我试着在每个图像上使用类似于下面的css，但当我调整浏览器大小时，它搞砸了。
z-index: -1;
position: absolute;
left: 60vw;
top: -50vh;
<div>
<svg class="circ" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 593.13 593.13">
<path
id="Path_1
浏览 0提问于2020-12-14得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
