腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
2
回答
跨浏览器css掩码
、
、
我试图在svg中创建一个带有和图像的掩码。 ->我在两个svg之间插入一个图像(在一个文件中) 我添加了一个像这样的类裁剪图像 <image id="image-front" xlink:href="" class="crop-image" /> 这是我的课: mask: url("/wp-content/themes/customtheme/assets/images/crop_image.svg"); -webkit-mask: url("/wp-content/themes/customtheme/
浏览 3
提问于2020-08-07
得票数 0
回答已采纳
1
回答
为什么我的SVG路径意外地在Chrome、Edge和Firefox中被剪短?
考虑以下SVG图像代码: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> <title>Clipped Path Problem Demo</title> <g id="group:image"> <defs> <mask id="mask"> <rect id="rectang
浏览 2
提问于2017-11-16
得票数 3
回答已采纳
1
回答
在firefox中使用许多外部svg剪辑路径
、
、
、
问题所在 我试图通过裁剪路径将两个图像裁剪成三角形,但当我尝试将内联svg代码移动到外部文件时,只有fp裁剪路径适用于图像。包含sp路径的图像将完全消失。 请注意,我使用的是火狐,因此不能使用纯css和clip-path: polygon()样式。 SVG代码 <svg xmlns="http://www.w3.org/2000/svg" height="0" width="0"> <defs> <clipPath id="fp"> <pol
浏览 16
提问于2017-01-27
得票数 1
回答已采纳
1
回答
剪辑路径url找不到id
、
我有一个SVG,我试图用它来裁剪一个div,但是我给<clipPath>标记的id不起作用。 我已经尝试更改ID,并确保SVG确实存在于同一文件中,并且ID是可见的。 svg是这样的: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 149.559"> <defs> <clipPath id="clipper"> <g id="svgg" stroke=
浏览 11
提问于2019-06-24
得票数 0
1
回答
固定SVG clippingPath
、
、
我正在尝试使用SVG创建一个固定的剪辑掩码。这个掩码必须有position: fixed,因为我希望它与浏览器一起滚动。 我有以下HTML/SVG和SCSS: <div class="table"></div> <div class="clipping-mask"> <svg> <defs> <clipPath id="clipping"> <circle cx="50%"
浏览 0
提问于2015-03-02
得票数 1
2
回答
如何通过CSS剪辑路径属性使用带模式的SVG clipPath?
、
、
使用SVG pattern**:** 初始图 <svg width="200" height="200" viewBox="0 0 100 100"> <defs> <pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%"> <circle cx="2" cy="2" fill="
浏览 1
提问于2020-03-17
得票数 2
回答已采纳
1
回答
为什么在viewbox与宽度和高度成比例相等的情况下,SVG显示为裁剪?
、
我只是在和打交道,svg如下所示: <svg width=200 height=200 viewbox="0 0 240 240" > <path d="M220, 220 A200, 200, 0, 0, 0, 20, 20 L 20, 220 Z" fill = "lightskyblue"> </path> </svg> 现在请注意两件事,分别将height和width设置为200,将width=2
浏览 4
提问于2016-08-16
得票数 0
回答已采纳
1
回答
用于Firefox语法问题的CSS SVG掩码
、
、
、
在Mozilla页面上,我尝试使用mask属性为CSS重新创建SVG掩码。 CSS: #canvasPreview { mask: url(images/masks/circle2.svg#circleMask); } HTML: <img id="canvasPreview" src="placehold.it/100x100"></img> SVG: <svg> <mask id="circleMask" maskContentUnits="objectBoundingBox&
浏览 2
提问于2012-10-24
得票数 0
2
回答
如何使SVG剪辑路径在Google中正确工作?
、
、
、
我使用内联SVG和CSS clip-path属性在div元素上创建斜角。 在Firefox上,斜角的大小是正确的。然而,在Google上,不仅斜角的大小不正确地变小了,而且div元素的大小也变小了。 。 如何使Google与SVG和clip-path正确工作 我知道CSS生成的内容可以模拟斜角效果。但在我的例子中,我必须使用SVG和clip-path。
浏览 13
提问于2016-08-28
得票数 2
回答已采纳
1
回答
GSAP / TimelineMax三维条形的SVG动画(3个多边形)
、
、
我已经创建了一个三维插画条(见代码)。现在,我想用TweenMax (或TimelineMax)动画化它,就好像它是从底部到顶部建立起来的。 这就是我需要创建的最终结果: 我尝试了几种方法来实现这一目标,但没有任何运气。 创建一个裁剪路径,然后尝试更改3个多边形的Y坐标(或将它们包装在<g >< /g >中) 尝试动画多边形的点() 我希望有人能帮我这个忙。 密码网址: <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id
浏览 1
提问于2015-11-17
得票数 0
3
回答
带有位置的元素:相对于SVG剪辑路径在Safari中没有显示
、
、
、
、
我有一个网页,在其中我使用一个SVG剪辑路径应用到页面的HTML元素之一。 SVG元素: <svg height="0" width="0"> <defs> <clipPath id="clip"> <path d="M150 0 L75 200 L225 200 Z" /> </clipPath> </defs> </svg> HTML元素裁剪路径应用于 <div id
浏览 2
提问于2015-04-24
得票数 5
回答已采纳
1
回答
未应用外部文件中的SVG筛选器
、
在我的资产目录中有一个名为gray.svg的文件 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0
浏览 1
提问于2015-06-13
得票数 11
回答已采纳
1
回答
存储CSS clip-path的SVG路径的最佳实践?
、
、
、
我一直在尝试使用SVG路径进行CSS裁剪。我终于掌握了它的诀窍。我用Adobe Illustrator制作了一些图形,然后将SVG放入宽度和高度均为0的HTML中,用<clipPath>包装路径,并为其分配一个ID以在clip-path属性中使用。我的问题是:我应该在哪里存储我所有的SVG,以便我可以为它们分配一些ID。将它们放在HTML中似乎不是一个好的做法,特别是当我必须使用多个的时候。我还不能在外部加载所有的标记。
浏览 25
提问于2018-08-06
得票数 0
2
回答
HTML中的SVG :如何使用多色SVG作为掩码
、
、
、
如果蒙版是单色的,我知道如何使用SVG蒙版完全“剪切”出另一个形状的蒙版。 如何使用多色SVG定义X作为掩模,使X的外部形状定义要裁剪的“孔”? 这里有三张图片,说明了我想要实现的目标: 创建@enxaneta建议的白色填充版本的形状不适用于我的问题,因为我有许多“复杂的”外部SVG定义,并且我不想更改每个定义。 有没有其他更简单的方法来实现我想要的东西?
浏览 1
提问于2018-12-11
得票数 1
2
回答
角DomSanitizer:消毒面膜-图像不工作
、
、
、
、
当为元素提供背景图像时,一切正常: <div [style.background-image]="sanitizedStyleValue"></div> 但是,如何为元素提供掩码图像呢?这是: <div [style.mask-image]="sanitizedStyleValue"></div> 不起作用。也是 <div [ngStyle]="{ 'mask-image': 'url( mymaskimage.svg )' }"></div>
浏览 0
提问于2020-05-24
得票数 3
回答已采纳
1
回答
使用CG/Quartz像仪表一样填充UIImage
、
、
、
、
假设我有一个图像(半圆形标尺),颜色从绿色到黄色再到红色。如何使用CoreGraphics/Quartz以编程方式动态裁剪和填充给定百分比的图像?
浏览 1
提问于2013-07-10
得票数 1
回答已采纳
2
回答
有没有任何方法可以使用svg (img)来裁剪图像?
、
、
据我所知(通过阅读之前发布的关于堆栈溢出的问题),使用svg裁剪图像是可能的,但是可以使用svg链接裁剪图像吗?例如:<img src="http://imgh.us/face01.svg"> 编辑:这就是我的意思: 谢谢!
浏览 1
提问于2014-11-14
得票数 1
回答已采纳
2
回答
如何<embed> svg并像img一样扩展它?
我只是喜欢图片,我想把图片和页面分开。我可以拍摄一张1024x768的图像,然后这样做 <img src="1024x768.jpg" width="400" height="300"/> 或者我可以这样做 <img src="1024x768.jpg" style="width:400px; height:300px"/> 图像将被缩放,而不是被裁剪。如何使用svg执行相同的操作?注意:我不想将svg直接嵌入到页面中。这就像对我所有的图片使用dataURL一样愚蠢。我的艺术家编辑图像,其他
浏览 0
提问于2012-01-11
得票数 7
回答已采纳
1
回答
如何在Python中裁剪SVG图像?
、
、
、
通过一个程序,我生成了一个尺寸为400px x 400px的SVG图像。但是,我想根据一个变量裁剪此SVG图像的底部,该变量指示图像底部的多少应以像素为单位进行裁剪。 这个SVG图像是用surface = cairo.SVGSurface("output.svg", WIDTH, HEIGHT)和ctx = cairo.Context(surface)用pyCairo生成的。 尽管HEIGHT变量是一个常量并且没有改变,但在对surface对象执行了一些操作之后,我希望能够再次调整它的大小。我可以使用Pillow Image对象来裁剪PNG,但它不支持SVG。 我也尝试过用op
浏览 4
提问于2020-07-10
得票数 1
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
回答已采纳
6
回答
如何在HTML/CSS中裁剪SVG文件
、
、
、
我有以下的HTML文件(mypage.html)。SVG 文件作为图像附加到其中。 <!doctype html> <html> <body> <!-- Display legend --> <div> <center> <img src="circos-table-image-medium.svg" height=3500; width=3500; /> </center> </div> </body> &l
浏览 6
提问于2016-06-02
得票数 36
回答已采纳
1
回答
用Python/PIL裁剪图像的非对称区域
、
、
、
、
有没有办法用Python裁剪图像中的非矩形区域? 在这张照片中,我想排除所有的黑色区域以及塔楼、屋顶和电线杆。 我想ImagePath模块可以做到这一点,但是我如何读取例如svg文件的数据并将其转换为路径呢? 任何帮助都将不胜感激。 (我的次要问题大概是更简单的任务:如何至少切出一个图像的圆圈?)
浏览 4
提问于2010-09-14
得票数 5
1
回答
如何将路径添加到剪辑路径
、
、
当我试图给图像添加一个波浪效果时,我被卡住了。这两个SVG,一个包含我正在尝试实现的路径,第二个行为如预期,但有一个错误的剪辑路径/形状。当我粘贴所需的路径时,它不起作用。为什么以及如何才能使其正常工作? 所需路径 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1441 742" fill="none"> <path d="M0 740.5V0H1440.5V557C1369 549 1193.8 549.4 1073 615C922
浏览 8
提问于2020-11-13
得票数 2
回答已采纳
1
回答
在具有作物转换的图像之间滚动
、
、
、
我已经寻找了一段时间,并尝试着去完成类似的事情。在中有一个非常奇特的效果,你可以在屏幕之间滚动,每个屏幕都有不同的图像,但滚动本身并不是移动图像,而是像正在移动的图像之间的裁剪线(视差效应,就像在几个网站中那样)。 我的问题是:我尝试了一个类似的效果,但遇到了两个障碍。掩码图像CGImageMaskCreate不够快,不允许对图像进行适当的裁剪。 我尝试的是加载显示在屏幕上的3幅裁剪图像,这意味着为3个掩码中的每个创建3个graphicsContexts,为每个掩码隐藏图像。然后,创建另一个缓冲区上下文,我将完成的部分加在上面(创建3次,每次裁剪图像之后,然后开始处理下一个),这是有意义的,因
浏览 4
提问于2014-01-21
得票数 2
回答已采纳
1
回答
svg掩码矩形在firefox中没有尺寸
、
、
、
、
我动画悬停一个蒙版SVG的不透明度,把一个半透明的层放在一个图像上。除了Firefox之外,它都运行得很好,在Firefox中,面具不显示,图像变白。通过CSS将蒙版应用于图像 <svg id="svg-fade" class="visible-sm-block img-circle" width="200" height="200"> <defs> <mask id="mask2" width="200" h
浏览 0
提问于2015-08-27
得票数 0
2
回答
为什么我的剪辑路径不工作时,它的来源是一个svg?
、
我按照的说明,使用css clip-path属性将svg clipPath应用于HTMLElement。但出于某些原因,它不适用于我,不适用于div,也不适用于图像。 在文档中,它说您可以使用下面的代码轻松地裁剪一个元素: <style>.target { clip-path: url(#c1); }</style> <svg:svg height="0"> <svg:clipPath id="c1" clipPathUnits="objectBoundingBox"> <svg:
浏览 0
提问于2014-12-30
得票数 4
回答已采纳
2
回答
如何将SVG夹到笔划的内侧?
、
、
我试图剪辑一个SVG,以消除两面的笔画:具体来说,使用红色矩形剪裁这个平行四边形,以得到右边的结果。 (形状是恒定的,但大小和笔划可能是可变的,所以我尽量避免直接用笔划宽度来计算)。 我读过许多关于CSS剪裁的教程,其中通常有一些使用多边形裁剪路径的简单示例,然后深入到BNF语法片段,描述如何在没有任何有意义的示例的情况下使用几何图形框。 在“带有几何框值的裁剪元素”部分的剪辑路径上的表示,裁剪路径可以指定一个几何框,该框定义相对于什么百分比,其中一个选项是填充框。 .剪辑-我{剪辑路径:多边形(10% 20%,20% 30%,50% 80%)边距框;边距: 10%;}在SVG元素
浏览 5
提问于2020-04-17
得票数 0
回答已采纳
1
回答
如何识别哪些剪辑路径应用于路径或填写PDF矢量图形?
、
、
、
我试图从PDF文件中提取矢量图形,并创建相应的SVG文件。为此,我使用SVGOutputDev ()和xpdf库。现在,SVGOutputDev还没有实现剪辑路径提取,我也在尝试实现同样的功能。虽然我能够提取剪辑路径定义本身,但我无法确定哪些定义适用于正常的笔画或填充区域。例如,请参考获取从PDF页面中提取的SVG,以及在提取过程中看到的PDF图形命令序列的相应转储。从SVG中可以看出,有多个剪辑路径和一个矩形填充区域。尽管在定义填充矩形之前定义了多个剪辑路径,但只有在之前定义的圆形剪辑路径矩形定义将与矩形相关联(根据PDF页面在各种PDF阅读器上的呈现方式,在白色背景中只显示2个填充的圆圈
浏览 2
提问于2013-06-08
得票数 2
回答已采纳
1
回答
悬停时移除clipPath
、
、
、
、
简而言之,我有一个用clipPath蒙面的图像,这样它就可以在IE 9+中工作。问题是,我需要有掩蔽隐藏在悬停,以便它显示完整的图像,然后重新应用于鼠标。我现在的剧本不起作用。钢笔包括在下面。我对SVG和clipPath非常陌生。 $(document).ready(function() { $('.finish') .mouseover(function() { $(this).find('svg').find('clipPath').css('display', 'none');
浏览 0
提问于2016-02-05
得票数 3
回答已采纳
1
回答
SVG -从图像的掩蔽区域中单击,继续触发对该图像的单击。
、
、
、
我有一个SVG,里面有两个图像。每个图像都被蒙住了。我的图片1在顶部和下面的图像2。如果没有蒙面,则图像2到达图像1蒙面区域的下半部,就像您在上看到的那样。 然后,我附加了一个点击侦听器到这两个图像。 我的问题是,当它们都被屏蔽时,如果我确实点击了图像1的下半部,那么图像2的单击事件就会被触发。我认为这是因为如果图像不是蒙面的,那么图像2的一部分也会重叠到图像1的下半部,但我不明白为什么它们都会在发生这种情况时被蒙住。 在这里,我给您留下一个JSFiddle和一个。我希望它能帮助你更好地了解正在发生的事情。 <div style="display:inline-block;wi
浏览 3
提问于2016-10-12
得票数 0
回答已采纳
1
回答
CSS剪辑路径属性存在SVG路径问题。
、
、
我试图在div上使用clip-path css属性。下面是我最初使用的一个工作示例 .contianer { height: 300px; width: 300px; background: red; display: flex; align-items: center; justify-content: center; } .box { height: 150px; width: 150px; background: white; clip-path: url(#clip); } <div class="contianer"
浏览 0
提问于2019-08-29
得票数 0
回答已采纳
2
回答
从中心点进行SVG缩放
、
、
我有这段代码,我希望SVG对象在悬停时展开。我找到了一个解决方案,使SVG对象从形状的中心展开,但它没有响应。我的另一个尝试是简单地使用a:hover和CSS转换对其进行转换,但正如您可能预期的那样,它可以伸缩,但也会远离画布。 a { display: block; width: 1500px; height: 850px; transition: all .2s; font-size: 0; position: absolute; background: black; } a:hover { background: gray; /*Attempt
浏览 3
提问于2017-12-14
得票数 1
回答已采纳
2
回答
svg中的剪辑路径和变换组合
、
请参考以下组中的剪辑路径。 <g id="container_svg_SeriesCollection" clip-path="url(#container_svg_ChartAreaClipRect)"><defs> <clipPath id="container_svg_ChartAreaClipRect"> <rect id="container_svg_ChartAreaClipRect" x="128.8" y="20" width="65
浏览 3
提问于2013-05-10
得票数 3
回答已采纳
1
回答
如何自动缩放<svg>元素和内容?(d3.js)
、
、
可以缩放svg元素(以及相应的所有我的内容)而不需要裁剪吗?我已经尝试缩放svg到100%的宽度和高度,但是内容正在被剪裁。 svg是通过d3.js生成的 HTML <svg> <circle cx="50" cy="50" r="50" fill="red"></circle> </svg> CSS svg { width: 100%; }
浏览 2
提问于2014-10-08
得票数 3
1
回答
内嵌css剪辑- Chrome上不受尊重的路径
、
、
我正在制作一些动画和图形库来使用html。对于某些情况,需要裁剪,并且由于元素是动态生成的,因此在元素的样式属性中添加了动态: el.style.clipPath = 'polygon(..)'; Firefox (76)工作正常,但是Chrome (83) (以及Opera )不尊重clip-path属性(在铬元素检查中,它甚至没有显示在元素的样式属性上) 在第64版之前,它应该是Chrome中的一个bug,但无论我看哪,它都说最新的chrome (以及webkit浏览器)特别支持clip-path和polygon。 备注:使用svg路径的url测试并不是一个问题,但我想避免
浏览 2
提问于2020-05-20
得票数 2
回答已采纳
1
回答
两个独立的飞船在相撞。
我有两个独立的svgs <svg>svg 1 stuff</svg> 然后是另一个svg <svg> svg 2 stuff </svg> 如果我把它们分开渲染就可以了。如果我这么做 <svg> svg 1 stuff</svg> <svg>svg 2 stuff</svg> 似乎样式或css或其他东西正在相互作用,而svgs看起来很有趣吗? 每个svg中的样式或css不是独立的吗?
浏览 4
提问于2016-06-25
得票数 0
回答已采纳
2
回答
SVG:用孔填充图案
在SVG中,我想使用填充模式,但在绘制其他形状的模式中留下“洞”,比如这个 (它不是用SVG绘制的)。我认为我应该使用裁剪和/或掩蔽,但我不知道如何使用。 整个SVG将叠加在需要通过“孔”(以及通过背景图案)可见的图像上。所以我不能通过用纯色填充空洞来模糊图像。
浏览 2
提问于2012-06-12
得票数 1
回答已采纳
1
回答
将旋转SVG裁剪为HTML/CSS中的文本
、
、
、
、
我有一个使用动画旋转的SVG图像,以及它旁边的一个文本元素。每当星光较亮的部分与文字重叠时,我希望文字的那一部分改变颜色。基本上,恒星爆发应该剪辑到文本,同时旋转。 基本设置是: <div class="header"> <div class="starburst-image"> <img src="starburst-dark.svg" class="starburst"></img> <img src="starburst-b
浏览 15
提问于2022-12-04
得票数 0
1
回答
可以动态地掩蔽/裁剪html元素组吗?
、
、
、
有没有办法使用javascript、css、画布或svg来创建动画掩码(可以是二进制的)。 我最接近的就是用这个: var data = canvas.toDataURL(); $('#masked').css("-webkit-mask-image","url("+data+")"); 但这只适用于镀铬和野生动物,而且有点问题。 有没有一种方法可以用css来画一个非常简单的三角面罩?
浏览 0
提问于2011-12-15
得票数 1
1
回答
在SVG中使用外部样式表在JSX中不起作用
、
我正在react应用程序中加载SVG。SVG引用外部样式表。 如果我将SVG从JSX移到index.html中,SVG将使用定义的css类。 如果我使用诸如react-svg之类的库,svg将在JSX中加载外部css类。 为什么在JSX中使用SVG时,SVG不加载外部CSS? import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import ReactSVG from 'react-svg'
浏览 57
提问于2019-04-17
得票数 0
6
回答
如何在Angular中更改svg元素的颜色?
、
我需要在我的Angular项目中通过应用不同的CSS类来加载、显示和动态更改SVG图像的颜色。 这个问题没有帮助,因为它使用了现代程序库,我想避免它。我也不想复制d字段中的path标签直接放在Angular项目的html文件中,因为这将是一堵我不愿意接受的文字墙。相反,我可以接受使用外部专用库来实现正确的结果,比如 ng-inline-svg,我尝试通过以下方式使用它:无视以下CSS类: .svg1 { color: green; } 它完美地将图像加载为常规的img标记,但如果我随后尝试对其应用自定义类来更改图像颜色,它将不起作用。 此外,我尝试通过以下方式使用object标记: 但是
浏览 242
提问于2019-12-12
得票数 4
回答已采纳
1
回答
屏蔽svg图像在资源管理器和边缘上不显示
、
我尝试在html页面上显示svg图标。在chrome和其他运行良好的浏览器上,但是在edge和internet explorer上,这个图标不会出现。我用css做了一个掩码。 body{ background: #000; } .default { background-color: #fff; width:45px; height:45px; } .icon { mask:url('./icons/network.svg') no-repeat center center; -webkit-mask: url('./icons/networ
浏览 18
提问于2019-04-08
得票数 0
1
回答
用于HTML-JavaScript动画的简单SVG绘图
、
、
、
、
我正在尝试在SVG中绘制一个简单的电池符号,它将使用HTML/JavaScript进行动画处理: 我想在SVG内的“电池电量”图上动态操作遮罩,但遮罩不像在Inkscape中绘制的那样显示。火狐和Webkit都只显示了这一部分的一小部分(还没有涉及JavaScript ): (墨迹绘制在左边,火狐渲染在右边) 因为我是SVG新手:这里有什么问题?
浏览 0
提问于2011-06-15
得票数 1
回答已采纳
2
回答
css clip-路径在Opera和Internet Explorer中不起作用
、
、
、
我需要使用裁剪来实现一个具有对角线右边缘的类似进度条的元素,而css3裁剪路径似乎是最好的选择。 我可以很容易地找到在Firefox和Chrome上工作的解决方案,但经过几个小时的试验,我在Internet Explorer和Opera上都没有取得任何进展:它们似乎就是简单地忽略了剪辑路径! 我更好地学习了Opera,它确实支持clip-path (虽然-o-clip-path似乎不存在),因为只有几个版本。 这里是我的完整的html文件,包括css和所有的,准备好复制/粘贴并运行,谁有什么建议?提前谢谢。 <!DOCTYPE html> <html> <head
浏览 0
提问于2014-01-22
得票数 0
1
回答
如何避免在调整窗口大小时裁剪SVG
、
有没有办法让未在windows上裁剪的图像的SVG版本调整大小? 您可以尝试在此处调整窗口大小: 或 请注意,当窗口较小时,图像的灰度版本与彩色版本的大小不同,即SVG被裁剪在较小的窗口上。 但JS的伸缩性似乎很好: 不幸的是,只要有可能,我就尽量避免使用JS,而更喜欢带有CSS的更简单的SVG文件。 我正在努力消化: 但这不是我需要的。 我需要图像的两种状态:彩色和灰度,就像这里讨论的那样,如果可能的话,只想让SVG适当缩放: 但不幸的是,灰度被裁剪了,没有正确缩放。 我尝试添加"vector-effect="non-scaling-stroke",但没有用处。
浏览 2
提问于2012-06-20
得票数 0
回答已采纳
1
回答
将SVG蒙版剪切成图像
、
、
、
、
我正在开发的一个新网站出了点问题。这是我第一次使用SVG,基本上我需要在我的图像中切出一个始终居中的圆圈,以显示元素下的图像。我试着使用我的剪辑,一切都很棒。我似乎找不到我的掩码代码中的错误。这是我设置的快速小提琴的。谢谢! <div class="bg-gradient"> <img src="http://www.redhdwallpapers.com/wp-content/uploads/2014/05/red-background-6.jpg"/> </div> <svg version="
浏览 4
提问于2014-08-22
得票数 0
4
回答
Firefox支持css掩码吗?
、
我在某处读到,css掩码可以在Firefox中与svg文件一起使用,但我不能让它工作……它在chrome和safari上运行得无懈可击,但我在火狐上就没那么走运了。
浏览 2
提问于2012-09-05
得票数 2
回答已采纳
1
回答
如何使svg适合图像
、
、
我想在图像标记中使用svg,如下所示 <img src="test.svg" style="width: 24px; height: 24px;"> 我的"test.svg“是: <?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> <svg width="24
浏览 18
提问于2019-08-13
得票数 0
回答已采纳
2
回答
如何将SVG实现为一个React项目(来自Vanilla JS)
、
、
、
我现在正在做一个高级CSS课程,它教如何实现SVG的,但是,它使用Vanilla JS,我想将它实现到一个反应性项目中。 使用Vanilla JS,要将SVG实现为一个按钮,您必须编写如下代码: <button class="search__button"> <svg class="search__icon"> <use xlink:href="img/sprite.svg#icon-magnifying-glass" ></use>
浏览 1
提问于2021-03-25
得票数 1
回答已采纳
3
回答
我能改变svg的颜色吗?我可以用CSS动态地通过<img>标记来呈现它吗?
、
、
我从Font下载了一个SVG文件,并将其呈现如下: <img src="@/assets/svg/arrow-down.svg"> 但是SVG呈现的是黑色,这不是我需要的颜色。我可以打开SVG文件并手动更改颜色,但是如果我需要相同的黑色SVG,我需要创建一个副本并再次将颜色更改为黑色。 这就是为什么我想知道我是否可以用CSS动态改变颜色?
浏览 7
提问于2020-07-28
得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
CSS3 clip-path 用法介绍
大麦端选座SVG 渲染
SVG 图像入门教程
10个实现炫酷UI设计效果的CSS生成工具
工作时使用CSS时可以免费使用的在线工具
热门
标签
更多标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
活动推荐
运营活动
广告
关闭
领券