腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
1
回答
SVG feGaussianBlur产生明显的条带和边缘
svg
、
svg-filters
、
gaussianblur
我正在做一些使用SVG的生成艺术。我注意到的一件事是,SVG feGaussianBlur滤镜对最近的颜色产生丑陋的结果。例如: <svg viewBox="0 0 512 512" width="512" height="512"> <defs> <filter id="blur-1" filterUnits="userSpaceOnUse"> <feGaussianBlur edgeMode="none" in="SourceGraphi
浏览 30
提问于2020-10-22
得票数 0
回答已采纳
2
回答
SVGs在Safari中显示模糊
html
、
svg
、
safari
我正在一个网站上工作,并决定给SVGs一个尝试。我的SVG应该在IE、Firefox和Chrome中显示。然而,在Safari,图像是模糊的外观。下面是我正在做的代码: <object data="section_3.svg" type="image/svg+xml" width="100%" height="722" class="aligncenter" > <img src="section_3.png" /> <svg version="
浏览 0
提问于2014-06-26
得票数 4
回答已采纳
1
回答
将SVG缩放到它的viewBox或更小
css
、
svg
我有一个内联<SVG>,它定义它的viewBox,但不定义它的height或width。我曾经在创建SVG时将width/height设置为与viewBox相同的值;好处是最终的图像缩放到SVG的自然单位,这是我想要的;问题是固定的width/height可能会使最终页面中的父容器溢出。从<SVG>中删除SVG会使图像渲染到父容器允许的最大尺寸,这几乎总是大于width/height的自然单位。 有没有一种方法可以将<SVG>缩放到它的自然单位,然后再缩小它(!)如果父容器太小?
浏览 2
提问于2018-07-23
得票数 0
1
回答
嵌套SVG导致意外调整大小
html
、
css
、
svg
我正在尝试使用嵌套的内联svg,以便在svg容器中灵活地排列较小的svg图像。但是,我正在努力理解如何调整嵌套SVG大小的规则。 svg { display: block; } 为什么可以正确显示200px x 200px的红色方块: <svg width="200px" viewBox="0 0 100 100"> <rect width="100" height="100" fill="red" /> </svg> 但是为什么包装在另一个svg元素中会导致正方形变成1
浏览 2
提问于2020-02-04
得票数 0
2
回答
理解svg的viewbox属性
css
、
html
、
svg
我正在尝试使用土耳其的地图,它是在之前创建的。 我更改了svg元素的尺寸 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="800" height="600" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:op
浏览 1
提问于2014-09-05
得票数 3
1
回答
SVG在IE10+中的奇怪行为
debugging
、
svg
、
cross-browser
、
internet-explorer-10
、
internet-explorer-11
我使用svg模式为页面后面的svg中的fill属性定义自定义背景图像。我将原始的svg和模式定义隐藏在页面的顶部。 IE9没有问题 IE10没有显示任何东西 IE11在小提琴中工作,但在生产中只在页面上显示最后一个 下面是一个简化的示例: <div style="height:0px; overflow:hidden"> <svg version="1.1" x="0px" y="0px" width="0" height="0" viewBox=
浏览 1
提问于2014-01-27
得票数 1
1
回答
在IE中SVG视图未对齐
internet-explorer
、
svg
、
alignment
有一个带有指定viewBox的简单内联svg: <div class="wrapper"> <svg class="svg-inlined" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0320 12"> <g> <circle r="6" cx=&
浏览 2
提问于2018-02-19
得票数 0
回答已采纳
3
回答
svg图像在所有浏览器中都是模糊的
html
、
css
、
svg
、
zurb-foundation
我在我的网站上使用了svg图片。但图像在所有浏览器上都会变得模糊。有没有人知道为什么会发生这种事? 下面是html: <div class="panel"> <img id="logo" src="img/teste.svg" alt=""> </div> (panel类来自foundation) 下面是css: #logo { position: absolute; top: 0%; height: 100%; left: 1%; width: 17%; min-width: 219px
浏览 1
提问于2014-01-05
得票数 1
2
回答
为什么viewbox属性会影响SVG元素的大小?
html
、
css
、
svg
空的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
1
回答
SVG:用于嵌套SVG的GetScreenCTM()在Firefox中是不同的
javascript
、
firefox
、
svg
我有一个带有svg的网页,其中包含另一个svg元素。问题是,我需要通过getScreenCTM()方法获取矩阵信息(对于嵌套的svg),火狐返回的结果与其他浏览器(IE、Chrome、Opera)不同。你不知道这是为什么吗? 这里我做了一个简单的例子: <svg id="svgwrapper" xmlns="http://www.w3.org/2000/svg"> <svg id="svgnested" width="1480mm" height="297mm" viewBox="0
浏览 4
提问于2016-05-24
得票数 3
回答已采纳
2
回答
显示SVG的ViewBox大小
javascript
、
html
、
svg
我正在使用img-Tag来显示SVG图像,我的用户将这些图像提升到了我的S3桶中。 <img src="http://testbucket.s3.amazonaws.com/mysvg.svg" /> 问题是,一旦图像被加载和显示,它的大小就不是它被构造的大小了。例如,一个测试图像显示的大小为1920x1920px,但它的ViewBox是0 0 128 128。但是,我想以它的ViewBox大小显示图像。在这种情况下,128x128px。 我想出的唯一想法是使用ajax请求下载图像,并从svg源代码中解析ViewBox属性。比我调整尺寸还要好。但是,我不想提出任何不
浏览 7
提问于2015-04-24
得票数 1
回答已采纳
1
回答
无论位置如何,如何获得一致的中风宽度?
javascript
、
svg
、
zooming
问题的实质是,当我移动SVG元素时,线条的宽度会发生变化。 我在浏览器环境中工作,我想要清晰的线条(没有反混叠),所以形状渲染被设置为crispEdges。例如,您可能有 "d M 0 0 L 10 0 L 10 10 z“ 定义正方形,样式设置为 填充:无;笔画:黑色;笔画宽度:1 1px;形状绘制: crispEdges‘ 然后使用translate()用鼠标拖动它。它可以工作,但当正方形移动时,直线的厚度会跳过一个像素,我希望厚度保持不变。 我想我知道为什么会发生,但我想不出任何办法来阻止它。发生这种情况(我认为)是因为相对于viewBox的坐标映射为相对于物理监视器的像素的坐标
浏览 1
提问于2020-02-02
得票数 2
回答已采纳
1
回答
使用文本缩放svg以适应viewBox
svg
、
scale
很难知道文本需要什么尺寸,尤其是旋转时。因此,很容易使viewBox变得太小,然后文本在viewBox之外消失。但是,如果viewBox太大,那么还会有大量额外的空格进行缩放。有没有一种方法可以缩放viewBox或svg内容以适应它? 我知道preserveAspectRatio可以将viewBox缩放到svg的宽度和高度,但我问的是如何缩放以适合viewBox。 更一般地说,如何确定文本的viewBox维度?
浏览 23
提问于2019-06-14
得票数 0
回答已采纳
1
回答
Xaringan png与svg图像质量的比较
r
、
r-markdown
、
xaringan
我发现,与SVG相比,Xaringan (xaringan::moon_reader()) html幻灯片中的PNG/JPEG图像具有视觉上的柔软性和模糊性。见下面的截图示例。 相比之下,这三种格式在标准html报告(rmarkdown::html_document())中具有视觉上的可比性。见下面的截图。 最明显的解决办法是使用SVG。但是,对于复杂的数字来说,SVG的大小是爆炸性的。因此,在模板中作为缺省值使用是有风险的。 例如,下面的图像是7 7MB作为SVG,而相应的PNG是50 as。有许多这样的SVG数字可能导致最终文件是数百个MBs的大小。 使用在线
浏览 3
提问于2021-09-11
得票数 0
回答已采纳
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中路径的维度
javascript
、
svg
、
bounding-box
我需要从JavaScript获取一个SVG的屏幕上的尺寸。 我的SVG上没有任何“变换”或“缩放”(变换、缩放)。唯一改变的是viewBox,它将改变SVG中所有元素的大小。 我一直在使用myPath.getBBox(),即使我更改了我的viewBox,返回的宽度也保持不变。 所以我想知道这个viewBox和路径的大小有什么关系。也许有一个函数可以计算宽度?
浏览 1
提问于2011-08-12
得票数 26
回答已采纳
2
回答
SVG在Android中保持高宽比
android
、
html
、
svg
、
responsive-design
我在Android手机上遇到了SVG缩放的问题。 我网站的几个部分都是基于通过<img>标签嵌入的SVG的宽度和高度尺寸。除了Android4.1.2原生浏览器(非CHROME)之外,所有浏览器都能正确、完美地缩放SVG,而不会扭曲高宽比。 这里是它如何出现在火狐(和所有浏览器)屏幕截图。 这里是在Android4.1.2原生浏览器.上显示的屏幕截图。 测试URL 我尝试了以下所有的解决方案,但都没有奏效。 设置宽度、高度和视图框不工作.而且,preserveAspectRatio也不起作用。<svg width="443.5" height
浏览 4
提问于2014-08-27
得票数 7
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
回答
SVG中基于路径元素的viewBox参数计算
svg
、
viewbox
我得到一个只有路径的XML或JSON,并且我需要重新创建SVG图像。 我创建了一个空的 <svg xmlns='http://www.w3.org/2000/svg' version='1.1'></svg>, 我在其中添加了一个<g transform="scale(1 -1)" fill='#aaa' stroke='black' stroke-width='5' ></g>,然后在此元素中添加了其中的所有路径(例如<path d= ...
浏览 0
提问于2012-04-05
得票数 7
回答已采纳
1
回答
如何自动创建适合完整内容的viewbox的最小尺寸?
svg
我有一个简单或复杂的SVG图形。例如,旋转的矩形。如果不进行计算,您就无法知道viewbox的最小尺寸,即图形完全适合的位置。 <svg viewBox="0 0 30 30"> <rect x="20" y="0" width="100" height="20" transform="rotate(45)" fill="black" /> </svg> 结果是,图形不适合viewbox。 有没有什么方法,如何获得viewbox的最小尺寸,使图形
浏览 26
提问于2019-05-03
得票数 0
1
回答
如何重叠两个SVG图像?
html
、
css
、
image
、
svg
所以我在Photoshop中创建了两个SVG图像。图像具有所有正确的尺寸,可以彼此对齐,但是,当我导出它们时,它们不会重叠。下面是两张图片(很抱歉尺寸太大了): 我将它们导出为SVG,然后将代码放入我的index.html页面中。这看起来像是: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="600" height
浏览 1
提问于2015-12-21
得票数 4
回答已采纳
3
回答
IE中所有屏幕大小的底部0
html
、
css
我希望我的svg图像在我的块的底部(位置:绝对,底部:0)。但在Internet Explorer中,它不起作用(显示在中心)。我可以将宽度和高度设置为svg,它会以某种方式工作,但它会在另一个屏幕尺寸较小/较大的设备上崩溃。如何解决此问题?谢谢!以下是代码 .wrapper { padding: 150px 20px 50px; text-align: center; color: #fff; } .main { background-color: #000; line-height: 48px; position: relative; } svg { p
浏览 1
提问于2018-02-07
得票数 0
回答已采纳
1
回答
使用嵌套的SVG viewBox和preserveAspectRatio对齐<image>
image
、
svg
、
viewport
、
viewbox
我正在使用D3.js构建一个svg。在它里面,我使用<image>来放置两种类型的图像img1和img2,这两种图像都具有相同的宽度W,但img1比img2更短,即H1<H2。 它们应该放置在外部svg中的一个矩形中,尺寸为WxH2,位置为(x,y),较短的一个(img1)应该在该矩形的底部垂直对齐,如下所示: 这听起来像是viewBox & preserveAspectRatio的工作,所以我尝试在位置(x,y)创建一个尺寸为WxH2 (2个高度中较大的一个)的嵌套<svg>元素,根据每次动态添加的图像,布局(这里显示了两个图像)将是
浏览 4
提问于2015-04-29
得票数 0
1
回答
在Webkit中使用带有定位对象的裁剪路径
svg
考虑一下 <svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink" viewBox="0 0 353 150"> <defs> <clipPath id="walk0"><rect width="44" height="70" /></clipPath> <image id="img" x:
浏览 4
提问于2012-02-23
得票数 4
回答已采纳
1
回答
SVG图标在调整大小时未正确呈现
html
、
css
、
svg
我有这个图标16x16。当实际大小设置为13.4x16 (出于某些环境原因)时,图标看起来很模糊。就我所理解的SVG而言,它应该调整大小到我强加给它的大小,但是如果我设置了preserveAspectRatio属性的话。我在这里做错了什么,为什么它不能很好地调整尺寸。 .menu { width: 13.4px; height: 16px; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SVG icon resize&l
浏览 4
提问于2014-10-19
得票数 0
回答已采纳
2
回答
带光滑边割的SVG -径向梯度
svg
我试图创建这样的SVG背景图像(两种颜色,径向渐变,S形切边光滑): 创建径向梯度非常容易(例如使用): <!-- SVG syntax --> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"> <radialGradient id="g920" gradientUnits="
浏览 7
提问于2016-08-16
得票数 0
回答已采纳
1
回答
缩放SVG以填充父div/td
html
、
css
、
svg
我希望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
1
回答
使用带有width=100和height=100的svg,我在safari e chrome中获得了额外的空间。
svg
、
space
测试一个包含一些文本的简单页面和一个包含高度和重量百分比值的svg,我在svg之前和之后得到了额外的空间。火狐没有额外的空间,但你可以在Safari和Chrome中找到它,你可以在这里看到这个: 这是svg代码: <svg id="uno" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 250" width="100%" height="100%" preserveAspe
浏览 3
提问于2013-08-11
得票数 1
1
回答
获取svg viewbox的最大x值
javascript
、
svg
、
viewbox
我有一个定义了viewbox属性的svg元素,其中高度和宽度都等于100%。svg包含一系列polygon对象。在单击一个多边形时,我希望它展开以填充整个svg (阅读:整个屏幕)。 我可以访问svg元素的尺寸并相应地调整polygon的大小,但是由于viewbox属性的缘故,无法绘制宽度。 有没有办法计算viewbox中对应于最右侧边缘的x尺寸?
浏览 1
提问于2014-05-14
得票数 1
1
回答
在d3中模糊事件不只在火狐中工作
javascript
、
d3.js
我尝试在d3中使用blur事件,它在chrome和safari浏览器中工作得很好,但不幸的是,它不能在火狐中工作。使用模糊的目的是在画布外部单击后重置其他项目。 这个问题有什么变通的解决方案? var width = 500; var height = 400; var svg = d3.select("#viz") .append('svg') .attr('width', width) .attr('height', height) .attr("preserveAspectRatio",
浏览 0
提问于2016-06-02
得票数 4
1
回答
使用viewbox的响应式SVG
javascript
、
d3.js
、
svg
、
responsive
、
viewbox
我已经设法使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
回答已采纳
1
回答
HTML img被扭曲,直到我突出显示图像
html
、
image
、
css
、
firefox
、
internet-explorer-11
我在一个<img>标签中有一个徽标,它用下面的css做得更小。 #logo{ position: absolute; max-height:82px; top: 24px; left: 24px; height:auto; width:auto; display:block; } 图像的加载方式如下: <img id="logo" src="~/Content/images/OriginalLogo.png" /> 但是,当页面
浏览 1
提问于2015-05-20
得票数 3
回答已采纳
2
回答
在Chrome 84中模糊缩小图像
image
、
google-chrome
、
browser
、
scaling
、
image-scaling
在最近的一次谷歌Chrome更新之后,我网站上的Retina图像变得模糊了。它们仍然是Retina图像(当我在一个新的选项卡中打开图像时,它是一个双尺寸图像),但是由于某些原因,它们看起来像非Retina图像一样模糊的。所以,看起来图像的向下缩放算法有问题。 1)火狐、和Microsoft中的 Retina图片看上去不错。 2)安装了一个旧版本的Chrome (83.0.4103.116)之后,这个问题就不存在了。我刚刚进一步研究了这个问题,发现这个问题是在84.0.4147.89版本的Chrome (Windows,桌面)中引入的。问题是没有出现在上一个83.0.4103.116版本中的!
浏览 0
提问于2020-08-20
得票数 5
7
回答
SVG根元素的默认背景色
svg
我希望将整个SVG文档的默认背景色设置为红色。 <svg viewBox="0 0 500 600" style="background: red">/* content */</svg> 上面的解决方案是可行的,但是样式属性的背景属性不幸不是一个标准属性:,因此在使用SVG清理过程中会删除它。 还有其他方法来声明这个背景色吗?
浏览 9
提问于2012-07-02
得票数 178
回答已采纳
1
回答
在Safari和Chrome中截断SVG背景文本
google-chrome
、
svg
、
safari
我正尝试在我的页面中渲染一个svg图像。图像和文本运行良好,但在Safari和Chrome中可视化时,背景文本会被截断。 我在html中使用的代码如下所示 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1106px" height="auto"
浏览 0
提问于2017-08-07
得票数 0
回答已采纳
1
回答
用viewBox set检索Firefox中的SVG位置
firefox
、
svg
我试图得到一个具有viewBox集的svg元素的左位置。viewBox基本上是一个正方形,而实际的svg元素则是矩形的。在大多数情况下,这不是一个问题(在Chrome中,一切都很好),但是,当试图在火狐中获取元素的左侧位置时(因为viewBox是方形的),火狐会报告viewBox的左边位置,而不是svg元素。 请参阅中的一个示例,该示例将使事情变得明显起来。 基本上,在Chrome中,左边位置报告的数字是8--这是我想要的数字。在Firefox中,它被报道为108。我如何让Firefox也报告数字8呢? 代码 HTML <div> <svg viewBox="
浏览 0
提问于2013-08-29
得票数 0
回答已采纳
2
回答
为什么身高在IE11上看起来如此不同?
css
我有一个带有width: 200px和height: auto的svg对象。在(几乎)每种浏览器上(edge、火狐、opera -都更新了),高度似乎和预期的一样-- 60.27px,由浏览器计算得出。但是IE11..。让我的生活更加艰难(我不能说这是令人惊讶的)。查看差异: 📷 svg代码: <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
浏览 17
提问于2019-04-10
得票数 0
回答已采纳
2
回答
按设计大小显示缩放的SVG
javascript
、
svg
、
zooming
我有一个适合其父<object>尺寸的SVG图像。通过更改图像的currentScale和currentTranslate属性来缩放图像。如何缩放要显示的图像的预期大小并使其在视口中居中? 示例代码: <object width="500" height="300" data="pic.svg"> <!-- The image will scale to be 300px heigh, I need it to be shown at 32x32 and centered in the v
浏览 2
提问于2011-04-05
得票数 0
回答已采纳
1
回答
如何调整html中img标记中使用的svg的大小?
html
、
svg
今天,我开始学习SVG并在HTML中使用它。 因此,我在SVG中创建了如下文件: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 400 200"> <path d = "M0,100 L100,100 L125,50 L175,150 L225,50 L275,150 L300,100 L400,100"
浏览 1
提问于2016-12-01
得票数 5
回答已采纳
1
回答
将SVG形状从Viewbox空间转换到源背景图像维度空间
svg
、
transform
、
transformation
我有一系列的SVG文档。每个文档都包含一个作为背景的<image>。在此背景下渲染了许多形状,可以是<rect>、<polygon>或<path>。这些形状是在一个viewBox中呈现的,它的尺寸是<image>源代码的0.24因子。因此,<image>具有一个值为scale(0.24)的transform属性。 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" view
浏览 0
提问于2017-11-06
得票数 2
1
回答
在ie中,SVG图像未获得全宽视区
html
、
css
、
image
、
internet-explorer
、
svg
我正在使用SVG图像与内联图像,并工作良好的其他浏览器,除了互联网浏览。在ie它显示最小的尺寸,但实际图像是100%的屏幕宽度,下面是我的SVG代码 <code> <section class="position-relative d-flex"> <svg class="d-none d-lg-block" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999
浏览 29
提问于2020-12-14
得票数 0
回答已采纳
2
回答
如何缩放具有一些复杂路径定义的SVG?
svg
、
scale
我有一个SVG,它的代码如下: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150px" height="150px" preserveAspectRatio="xMinYMin meet" viewBox="0 0 150 155" version="1.1" xmlns="htt
浏览 4
提问于2012-04-30
得票数 19
1
回答
为什么offsetX和offsetY在firefox和chrome中返回不同的值
javascript
、
html
、
css
、
svg
我正在编写一个绘图web应用程序,使用mousemove事件的offsetX和offsetY,它在chrome中工作得很好,但在firefox中却不行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
浏览 3
提问于2020-06-10
得票数 1
回答已采纳
1
回答
根据页面加载时的div大小缩放硬编码的SVG图像
html
、
css
、
svg
、
scale
、
viewbox
我有一个div元素,它包含一个svg图(一堆圆和边),我还在svg元素上设置了viewBox属性。图中节点和边的坐标在px中针对指定的屏幕大小(因此也针对指定的div大小)进行了硬编码。使用所需的div大小,图形可以很好地加载,并且还可以在调整浏览器窗口大小时上下缩放。 但是,每当页面在不同的屏幕/div大小下加载时,我的问题就会出现,因为之前指定的div大小的svg图像保持不变。这会创建一个对于较小的浏览器/屏幕尺寸来说太大的图像。 我为svg元素设置了以下内容: <svg id="mygraph" preserveAspectRatio="xMidYMid m
浏览 2
提问于2012-09-04
得票数 0
回答已采纳
1
回答
有人能解释火狐为什么要制作这个SVG图像吗?
css
、
firefox
、
svg
有人能解释火狐为什么要制作这个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
回答已采纳
1
回答
SVG文本和rect的相对大小
svg
当向SVG元素添加属性(宽度、高度、viewBox)时,有人能够解释rect和文本的相对大小的变化吗?(在Linux x86_64上用火狐30进行测试) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title&
浏览 0
提问于2014-07-22
得票数 0
回答已采纳
4
回答
svg背景垂直重复的间隙
html
、
css
、
svg
我有一个简单的div,一个SVG设置为垂直重复的背景图像。在Chrome和Firefox上,根据屏幕大小,我看到了不同大小的空白(请调整窗口的大小)。 .bg { width: 50%; height: 2000px; display: block; background-repeat: repeat; background-size: contain; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' widt
浏览 11
提问于2019-10-29
得票数 2
回答已采纳
1
回答
PDF裁剪框与用PDF页面创建的SVG之间的差异
pdf
、
svg
、
xpdf
我试图将PDF页面的背景图像提取到SVG (使用xpdf库)。我面临的问题是,PDF包含额外的图像/图形(大概在cropbox之外),这些图像/图形不是由PDF阅读器呈现的,但是相应的SVG包含这些图像/图形。我尝试将SVG的viewBox属性设置为与该cropBox页面的cropBox边界相对应,但生成的SVG仍然显示了一些未由cropBox呈现的图形对象。我还尝试向SVG添加一个剪辑路径--一个矩形裁剪区域(边界对应于PDF裁剪框),但这也没有消除PDF中没有看到的一些额外的图形元素。知道问题出在哪里了吗?什么是正确的方式来携带PDF文件盒到SVG?顺便说一句,在上述两种情况下生成的SVG
浏览 1
提问于2013-08-26
得票数 1
回答已采纳
3
回答
SVG笔划与填充之间的空间
svg
用相同的颜色和超过一定尺寸的stroke-width填充和抚摸一个圆,在两个油漆区域之间产生一个奇怪的透明区域。怎么一回事? 这在Chrome和Firefox中都有发生,所以可能是为了规范,但我在规范中找不到任何关于这种行为的语言。 <svg viewBox="0 0 300 300"> <circle cx="100" cy="100" r="8" stroke="#000" stroke-width="40" fill="#000"/&
浏览 0
提问于2017-01-30
得票数 5
回答已采纳
1
回答
SVG作为CSS背景,Opera中的缩放级别问题
css
、
svg
、
background
、
opera
我在Opera中使用SVG后台遇到了困难。 当我缩小页面时,背景开始在x轴上重复,尽管有` background -repeat: repeat-y‘ 我创建了一个,展示了我找到的第一个在线SVG图像的问题。 body { background-image: url("http://www.anarchopedia.org/images/2/22/Heckert_GNU_white.svg"); background-repeat: repeat-y; } 下面是我电脑上Opera 12.14行为的截图: 这种行为适用于任何具有width="W"
浏览 0
提问于2013-03-05
得票数 12
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
SVG实现可爱的动物哈士奇和狐狸
CSS3 SVG实现可爱的动物哈士奇和狐狸动画
技术干货:前端图形化技术简介(上)
浅谈 Web 图像优化
设计常用文件格式
热门
标签
更多标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
活动推荐
运营活动
广告
关闭
领券