腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
1
回答
CSS掩码在firefox上不起作用
html
、
css
、
firefox
、
svg
我尝试使用掩码显示SVG图像,但在Firefox中没有显示。我的CSS类如下: .myClass { -webkit-mask: url('../img/arrow-down.svg') no-repeat 100% 100%; mask: url('../img/arrow-down.svg') no-repeat 100% 100%; background: rgba(67, 67, 67, 0.8); width: 1.15em; height: 1em; } 而html代码只是一个简单的: <div clas
浏览 12
提问于2016-07-29
得票数 1
回答已采纳
1
回答
在流体SVG中保持背景图像纵横比的问题
css
、
svg
、
polygon
我有一个具有整个页面宽度/高度的SVG,因此SVG和SVG中的多边形会根据窗口改变形状和大小,这是通过将SVG元素上的preserveAspectRatio设置为"none“来实现的。多边形有一个背景图像,应该保持它们的纵横比,因为我将preserveAspectRatio设置为"xMinYMin slice“。但遗憾的是,SVG元素上的preserveAspectRatio似乎引起了冲突,现在当我改变窗口大小时,背景图像会改变纵横比。我想要的基本上是相当于"background-size: cover“的SVG。 <!DOCTYPE html> <h
浏览 0
提问于2014-11-01
得票数 3
3
回答
在svg中更改图像的背景色
html
、
css
、
svg
如何在svg中更改标签的背景色。我有一个透明的图像加载在图像标签中,现在我想应用背景来应用颜色选择器的阴影。 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.p
浏览 16
提问于2019-04-16
得票数 1
1
回答
cairosvg中带有蒙面图像元素的PNG导出似乎违反了SVG标准
python
、
python-3.x
、
svg
、
cairo
背景:我编写了一些python代码(使用svgwrite)来生成一组SVGs,并且我正在试图找到一种(最好是纯python)方法来将这些SVGs转换为PNGs。我正在尝试使用cairosvg库中的svg2png,但我遇到了一些问题,其中一个问题是为了解决这个问题。 Problem:问题似乎在于cairosvg如何用掩码解释图像元素的参数。当您向Image元素提供'x‘和'y’参数时,cairosvg首先像两个参数都是0一样应用掩码,然后在应用掩码之后,根据给定的'x‘和'y’值来翻译结果。我认为应该根据规格(以及Chrome、Inkscape和其他各种渲染引擎对
浏览 6
提问于2022-08-14
得票数 0
2
回答
SVG元素的CSS背景
html
、
css
、
svg
我正在尝试创建一个具有内联SVG的HTML,该SVG具有一个带有CSS背景的元素: <html> <body> <svg> <foreignObject width="50" height="50"> <div style="red; width:50; height:50"></div> </foreignObject> <rect width="50" height="50" tra
浏览 4
提问于2019-06-03
得票数 0
2
回答
如何在没有宽高比的情况下在SVG中保持图像的宽高比
css
、
svg
、
sass
、
cross-browser
我有一个SVG,它可以作为遮罩图像的剪切路径正常工作。SVG形状的preserveAspectRatio=为“none”,并且按照我想要的方式运行(全宽,但保持静态高度)。 问题是,我正在剪切的图像与SVG一起拉伸和挤压,而我希望它的行为与具有背景大小的背景图像相同: cover;(始终填充SVG,必要时进行裁剪,但保持纵横比)。 跨浏览器兼容性(最新的Chrome、Firefox、Safari和Internat Explorer)可以做到这一点吗? HTML: <div class="outer-wrapper"> <div class="svg
浏览 5
提问于2017-11-16
得票数 1
1
回答
固定SVG clippingPath
css
、
svg
、
clipping
我正在尝试使用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
1
回答
为什么我的SVG路径意外地在Chrome、Edge和Firefox中被剪短?
svg
考虑以下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
回答
使用svg的透明渐变蒙版
javascript
、
html
、
css
、
svg
我需要一些关于svg的帮助。有一个“背景图像”。另一个“图像”覆盖在它上面。“图像”必须要有一个洞,这样背景图像才能照亮。我使用svg实现了这一点: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-repeat: no-repeat; background-size: cover;
浏览 24
提问于2017-08-01
得票数 0
2
回答
角DomSanitizer:消毒面膜-图像不工作
html
、
css
、
angular
、
typescript
、
angular-dom-sanitizer
当为元素提供背景图像时,一切正常: <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
回答已采纳
2
回答
元素img与SVG Firefox
html
、
css
、
image
、
firefox
、
svg
为了在不同的浏览器中兼容svg的所有图像,我对Firefox有一个问题。 我在元素img中使用.SVG图像。就像这样: <img src="image.svg" /> 如果您可以看到下面的图像,似乎SVG是重复的。如果我使用svg作为背景图像,问题是我可以做背景-重复:不重复,但在这种情况下,我需要使用svg在img元素,不能指定背景-重复元素img。 我怎么才能解决这个问题?所有的答案都会被接受。
浏览 1
提问于2014-04-17
得票数 4
回答已采纳
1
回答
将旋转SVG裁剪为HTML/CSS中的文本
html
、
css
、
svg
、
css-animations
、
clip-path
我有一个使用动画旋转的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
2
回答
跨浏览器css掩码
css
、
svg
、
cross-browser
我试图在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
回答
用html中定义的svg掩码掩蔽
html
、
css
、
svg
、
mask
我正在尝试一些非常简单的测试,用我在html内容中创建的SVG形状掩蔽。我尝试过不同的选择: 口罩,-webkit-面具 面具-图像,-webkit-面具-图像 不同的MaskUnits和MaskContentUnits 面罩类型:亮度或不亮度 我做不到,我必须做一些错误和愚蠢的事情。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
浏览 4
提问于2015-06-27
得票数 2
3
回答
即使指针-事件:可见/绘制,SVG仍会收到单击。
html
、
css
、
svg
、
visible
、
pointer-events
基本上,我的HTML页面上有几个.svg图片放在<img>标签中,如下所示: <img src="images/corner.svg" alt="menu" class="menu" onClick="Fade();"/> 所有这些图像是相互重叠的。它们的大小相同,但内容不同。 我现在只想让这些图片的内容可以点击。 在CSS中使用pointer-events: visible;或pointer-events: painted;似乎是可能的,但我不能让它像那样工作。图像仍然接收点击在它的每一点,而不仅仅是在内
浏览 1
提问于2014-03-18
得票数 5
回答已采纳
1
回答
SVG -从图像的掩蔽区域中单击,继续触发对该图像的单击。
javascript
、
html
、
xml
、
svg
我有一个SVG,里面有两个图像。每个图像都被蒙住了。我的图片1在顶部和下面的图像2。如果没有蒙面,则图像2到达图像1蒙面区域的下半部,就像您在上看到的那样。 然后,我附加了一个点击侦听器到这两个图像。 我的问题是,当它们都被屏蔽时,如果我确实点击了图像1的下半部,那么图像2的单击事件就会被触发。我认为这是因为如果图像不是蒙面的,那么图像2的一部分也会重叠到图像1的下半部,但我不明白为什么它们都会在发生这种情况时被蒙住。 在这里,我给您留下一个JSFiddle和一个。我希望它能帮助你更好地了解正在发生的事情。 <div style="display:inline-block;wi
浏览 3
提问于2016-10-12
得票数 0
回答已采纳
2
回答
为什么页面上的SVG图像会导致Chrome使用100%的CPU?
google-chrome
、
svg
、
cpu-usage
我在页面上使用SVG图像(通过CSS背景图像属性),当我在Chrome (Windows上的11.0.696.71版)中查看这个页面时,我的CPU核心之一达到100%并永久停留在那里。我的SVG映像非常简单,并在它自己的XML文件中定义: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
浏览 3
提问于2011-06-04
得票数 7
回答已采纳
1
回答
如何将图像插入svg的圆元素中?(Python: svgwrite)
python
、
svg
、
svgwrite
我知道如何在普通的SVG文件上完成这个任务,但是我在python3.7中使用的是svgwrite包,我不知道如何做到这一点。遗憾的是,没有足够准确地报道这个话题. 下面是我想出的代码,它不起作用: image.add(image.ellipse(center=(half_x, half_y), r=(340, 340), fill=line_color, cx=50, cy=50, rx=80, ry=60, stroke="rgb(255,255,255)", opacity=0.3, stroke_width="0.5", id="img-conta
浏览 1
提问于2021-07-15
得票数 0
回答已采纳
2
回答
我可以使用JavaScript SVG库将SVG图像显示为div背景吗?
javascript
、
jquery
、
html
、
svg
在HTML页面中,我希望在div元素中使用SVG图像作为背景,并在其上面添加文本的pre元素(背景)。背景图像应与包含的div一起缩放,同时保持纵横比。 我是否可以使用 / / 等SVG JavaScript库来完成此任务 我想要添加背景图像的结构类型: <div> <pre>Some text...</pre> </div>
浏览 0
提问于2011-09-05
得票数 2
回答已采纳
1
回答
用CSS动画<img> svg?
jquery
、
html
、
css
、
animation
、
svg
我在CSS-Tricks上读过一篇关于在svg图像中设置元素动画的。作者通过在svg中添加CSS-classes来处理不同的元素。我想使用这种技术,但不幸的是在背景图像上。所以svg在CSS中被设置为背景图像,而不是内联的。在不将svg直接放入我的HTML中的情况下,是否有机会达到同样的效果?也许和jQuery一起? 谢谢!
浏览 0
提问于2014-11-15
得票数 0
4
回答
如何捕捉HTML元素的图像,并保持透明度?
html
、
image
、
transparency
、
gimp
,我正在的网页上工作,这将允许网站管理员将样式添加到twitter提要中。这些样式中有几种在显示时使用透明性。我想为他们创建一个图片列表供他们选择。目前,我在检查背景上拍摄截图,如下所示: 但这不是我真正想要的。 他们是否采取了某种方法来捕获HTML元素的图像,并保持透明度? 编辑:我只是深入研究这个问题,所以我遇到了一些新的主题,比如HTML5画布和-moz-元素。是否可以使用-moz-元素将画布背景设置为html元素,然后从画布中提取图像数据?我要试试这个,除非有人“去过那里”让我不高兴。 编辑:moz元素和画布是一个死胡同。-moz-元素将项目设置为背景,但不允许您保存背景图像
浏览 0
提问于2011-05-18
得票数 5
回答已采纳
1
回答
Safari中的SVG嵌入bug迫使我寻找另一个选项
vector
、
svg
我正在为触摸屏构建一个交互式网站,它运行的是谷歌Chrome的最新版本。用户必须点击,在这种情况下,一系列的建筑物,以获得更多的信息。其想法是绝对定位超链接,并将它们放置在建筑物的顶部,这些链接被合并成一幅单一的背景图像。但正如你在下面看到的,问题是一些超链接重叠。用户在不知情的情况下使用错误的建筑的可能性相当大。 因为我已经有了每个建筑物的矢量掩码,所以我认为最好不要使用超链接,而是使用SVG文件。SVG文件支持一个名为xlink的标记,您可以使用它来使向量对象链接。链接到另一个文件的可点击区域不再是正方形,而是具有与矢量掩码相同的形状。所以就像我对超链接做的一样,我把它们放在建筑物的顶部。
浏览 2
提问于2010-10-08
得票数 2
1
回答
如何在SVG中从形状中剪切文本?
javascript
、
css
、
svg
、
snap.svg
、
svg.js
我有一个SVG文件,如下所示: 有什么办法使文本透明吗?也就是说,我不想使用填充颜色,而是删除层并显示背景中的内容( SVG,即SVG下面的任何内容)。换句话说,让路径和文本的交集变得透明? SVG文件的内容: <svg width="36.087" height="34.314" viewBox="0 0 36.087 34.313999" x="1190.56" y="753.5780000000001"> <path fill="#63a95c" d=
浏览 0
提问于2015-11-04
得票数 3
回答已采纳
4
回答
internet explorer 10和11中的灰度CSS背景?
html
、
css
、
svg
、
internet-explorer-10
、
internet-explorer-11
灰度在除ie10和ie11之外的所有浏览器上都工作得很好。我甚至尝试过。它可以很好地处理嵌入在HTML代码中的图像,但不能用作CSS中声明的背景图像。 我甚至尝试过: img.grayscale:hover { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\
浏览 0
提问于2014-04-17
得票数 0
2
回答
firefox中带有基本href的SVG掩码
html
、
css
、
firefox
、
svg
SVG口罩在Chrome中运行良好,但在Firefox中运行良好。 所以我找到了另一种方法来解决它。 但是当我使用像<base href="/" />这样的基本标记时,图像标记<image width="165px" height="150px" xlink:href="mask.png" filter="url(#maskfilter)" />就不起作用了。 这是HTML代码。 <!DOCTYPE html> <head> <base href="/
浏览 2
提问于2014-02-24
得票数 8
2
回答
在不使用JS的情况下,是否有方法在悬停期间操纵自定义CSS变量的字符串值?
css
、
css-selectors
问题:在下面的示例中,有一种方法可以在悬停状态下使用CSS来锁定多边形的填充颜色吗?我需要把它从fill:rgb(0, 0, 0)改为fill:rgb(255, 255, 255)。 背景:,我知道我可以用不同的填充颜色创建第二个图标,并将其存储在根中,但这似乎是浪费。此外,我还可以将SVG作为图像包含在HTML中,并以多边形为目标。但在我的例子中,我需要使用SVG作为背景图像。有了这些限制,是否有办法使多边形内的填充成为目标? 示例: : root { --icon-arrowDown: url('data:image/svg+xml;utf8, <svg xmlns=
浏览 3
提问于2022-05-08
得票数 1
回答已采纳
1
回答
无法在svg rect中看到背景图像
javascript
、
html
、
svg
、
d3.js
嗨,我试图在svg矩形上添加一个背景图像。但不幸的是,我无法在矩形的背景中看到图像。我的代码片段 rectCanvas_o = parentElement.append("rect"); rectCanvas_o.attr("width", "30").attr("height","100%"). attr("class", this.currentAlarmClass_s); rectCanvas_o.append("defs").append("pattern"
浏览 3
提问于2014-03-18
得票数 0
回答已采纳
3
回答
SVG用作背景图像会丢失嵌入图像吗?
css
、
google-chrome
、
svg
、
background-image
、
responsive-design
我使用svg作为背景图像,用于响应式布局,以在线格式重新创建复杂的小册子。 但是,如果我在svg上嵌入图像,它们就不会出现在背景上。 最奇怪的是,如果我自己检查svg,图像就在那里,所以这有点烦人! 有没有人知道这与svg配置或类似的东西有关吗? 我如何解决这个问题,并仍然能够使用svg作为背景图像(background-size:封面规则!)? 哦,我应该补充的是,我已经在我的mac的chrome上看到过这种“现象”,如果它是特定于浏览器的,请说出来! 有问题的svg是这样的: 不幸的是,我不是一个jsfiddler,所以我不能创建一些东西来展示给你们所有人。 提前感谢!
浏览 0
提问于2012-09-20
得票数 2
回答已采纳
2
回答
如何用图像替换SVG形状?
javascript
、
svg
给定一个类似于这个的SVG,在svg上画的圆圈如下所示: <circle cx="448.0843694002127" cy="236.6677163333033" r="12" stroke="#cccccc" stroke-width="1" fill="#0000ff"/> 我尝试使用firebug在相同的x/y坐标下用示例图像手动替换它,因此,例如,用以下代码替换上面的代码: <img width="50px" height="50px" c
浏览 0
提问于2013-10-25
得票数 2
1
回答
CSS中的SVG,图像缩小
html
、
image
、
svg
、
resize
什么会导致图像(在本例中是svg)从html内部移动到它在css文件上的大小。我有一个位于背景上方的图像,当鼠标悬停在部分背景上时,我使用svg掩码显示底层背景图像。这很好用!但是,当我将css和javascript移动到它自己的文件中,而不是在同一个html文件中时,顶部的图像(在svg中)缩小到一个小的大小。任何关于这种情况发生的原因的帮助都将不胜感激! 这是原作,工作得很完美。 <!DOCTYPE html> <html> <head> <script type="application/javascript" src=&
浏览 1
提问于2015-01-03
得票数 1
回答已采纳
3
回答
HTMl+SVG+JavaScript:在运行时更改文本?
javascript
、
svg
、
prototypejs
、
inkscape
我即将将一些基于Flash的应用程序迁移到HTML+JavaScript+SVG (唯一的目标呈现引擎是Webkit)。 我对SVG完全陌生,我想知道是否可以使用SVG作为模板图像填充屏幕,并动态地从嵌入在JavaScript页面中的JavaScript代码中更改包含的文本。 我想做的是:在Inkscape中绘制页面的基本结构(带有一些图形和文本占位符),然后在HTML页面中显示SVG并通过JavaScript填充文本占位符。 我可以通过在背景中显示一个静态SVG图像来获得相同的结果,并将一些绝对定位的DIVs放在上面以显示文本,但是我想设计Inkscape中文本标签的位置、大小和样式。 这能
浏览 4
提问于2011-05-30
得票数 5
回答已采纳
1
回答
为什么外部SVG超出了父SVG视图框的范围?
html
、
svg
我正在构建一个web应用程序,它使用SVG来定位和显示特定的元素。其目的是允许对外部链接的SVG图像进行缩放和摇摄/扫描。在Opera、Firefox和Chrome (都是最新的气体)上,一切都如预期的那样工作。在IE和Edge (也是最新的GAs)上,当我向上缩放时,图像超出了父SVG的范围。 我尝试过各种选项,包括显式地将CSS溢出设置为隐藏的,以及在外部SVG和我的内联SVG中调整viewBox设置。 我隔离了所有相关的HTML、CSS和SVG数据,并包含在这里托管的一个示例中: 外部SVG在代码中链接。以下内容详细说明了结构: 橙色:身体背景颜色。绿色:我想要显示的内容的容器。Blue
浏览 0
提问于2019-07-17
得票数 0
1
回答
如何在CSS中使图像适合此PNG图像的形状?
html
、
css
、
image
、
sass
、
png
如何在保持形状的情况下将图像放在此png图像上?在CSS中? 我已经看到有办法做到这一点与SVG剪辑路径,但我想知道是否有一个更快的方法,只是设置为背景图像或其他什么? 谢谢,如果这是个愚蠢的问题,很抱歉。 ?
浏览 6
提问于2021-03-22
得票数 2
回答已采纳
2
回答
Safari无法在嵌套的SVG中呈现图像
image
、
svg
、
safari
因此,考虑到这个HTML,在Firefox、IE和Chrome中,背景图像加载得很好。但在Safari中,它只是忽略了它。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <m
浏览 1
提问于2015-07-14
得票数 10
回答已采纳
3
回答
将SVG和.JPG合并成一张图片?
javascript
、
svg
、
raphael
我有一个网站使用SVG/VML (通过拉斐尔JS)设置在一个地图应用程序中的SVG是用来显示图形顶部的背景地图图像。这在屏幕上工作得很好,也适用于打印带有覆盖的硬拷贝地图。然而,当用户想要将带有SVG覆盖的地图图像保存到本地.JPG文件时,这种设置就失败了。 更具体地说,使用大多数浏览器的标准右键单击功能来“将图像另存为...”当SVG/VML元素位于图像顶部时不起作用。在地图上单击鼠标右键,用户可以保存地图图像,但不需要覆盖。右键单击覆盖的SVG元素,用户得到的最好结果就是能够检查该元素或保存一些HTML (根据浏览器的不同而有所不同)。 所以我这里的主要问题是:有没有可能把一张图片和一个S
浏览 8
提问于2012-03-29
得票数 6
1
回答
SVG掩码总是使元素不可见
javascript
、
svg
、
svg.js
我在Ubuntu 15.10上使用Chrome 49.0.2623.87 (64位)。火狐也不起作用。 我使用svg.js编写了以下代码: function blockmouseenterHandler(){ console.debug('mouseenter') var mask = anatomy.frame.rect(100,100).move(0,0).addClass('hovermask').fill({ color: '#000'}); this.maskWith(mask); } 它创建的掩码/防御: &l
浏览 0
提问于2016-03-23
得票数 0
回答已采纳
4
回答
需要在QML中更改SVG图像的颜色
qt
、
qml
我试图在QML(用于桌面)中设计一个概述面板。界面应该使用固定的分辨率,所以我更喜欢使用PNG图像为不同的图形元素创建模式(管道,管道曲线,管道-t,泵,阀门等)。现在的问题是如何更改不同组件的填充颜色:我希望用户可以选择颜色(在实际情况下,可以使用不同的液体),但我无法在QML中找到这种方法。我想用我的PNG组件作为背景,然后用一个SVG掩码把一个矩形画出来。但在网络上,我发现只有qt组件"MaskedItem“无法在桌面上使用。我想知道是否没有办法在我的PNG上放置一个只有一种颜色(黑色和透明)的SVG图像,然后在QML中更改这个颜色的属性。有人有什么想法吗?非常感谢。 (编辑更好
浏览 5
提问于2013-03-05
得票数 4
回答已采纳
1
回答
如何将SVG (或CSS)中的图像转换为非平行四边形形状?
css
、
image
、
svg
、
transform
我希望能够创建一个SVG,其中有一个(正常的)图像在背景和一个不同的较小的图像某处,有4个“边”移动,以创建一个非矩形的形状。思考类似的图像扭曲,以创建一个透视视图。 在SVG中有可能吗?如果没有,是否可以在CSS中以一种可以在页面的非固定元素中看到的方式出现? 我发现一些CSS透视图,但它使用X,Y,Z,当我真的只需要适应(扭曲)一个预定义的非平行边“框”图像。
浏览 2
提问于2014-11-24
得票数 1
回答已采纳
1
回答
用css设计重复svg背景的样式
css
、
svg
我已经浏览了大约4个小时的互联网,我找不到任何解决我的任务。 我只想设置一个svg图像作为背景,并重复它。我不知道如何应用背景-重复等等。我还希望能够使用css和/或JS来设计svg的边框,每分钟从div的左侧到div的右侧更改边框--颜色一次。我只知道这一点: svg边框名为stroke,但我不知道如何使用这些信息。 到目前为止,我得到的是: <div id="test"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/
浏览 7
提问于2014-09-27
得票数 0
2
回答
我怎样才能把纯色的图像与文字的颜色相匹配?
css
在一个网站上,用户可以提交包含图像的文本帖子,也可以更改网站的各种格式,例如文本颜色,我希望允许他们提交与浏览者选择的任何文本颜色相匹配的图像。 例如,如果有人想在他们的帖子中包含一个复杂的数学公式,他们现在要么使用非常奇怪的符号,要么提交一个图像。读者可能无法很好地看到这个图像,或者,如果他们选择了某些背景色。 在我希望实现的系统中,有人可以提交一个带有不同alpha通道的纯色图像。它将使用CSS设计为currentColor。 混合模式不起作用,因为它们也与图像背后的元素混合。我不喜欢在画布上用JavaScript绘图,因为每次用户更改格式时,我都必须设置它来更新。我也不能仅仅使用Java
浏览 4
提问于2015-03-08
得票数 0
回答已采纳
1
回答
是否可以使用SVG图像文件作为源来剪辑HTML元素?
html
、
css
、
clip
我试图达到以下效果,这是刚刚完成的photoshop与模式削减的背景。 你在左边看到的图案是从黑暗的背景中剪裁出来的,以显示坐在它们后面的图像。 我有该图像的SVG文件,并想知道是否可以,如果是的话,如何用SVG文件作为源将一个坚实的背景剪辑到这些形状上?
浏览 4
提问于2021-05-30
得票数 1
回答已采纳
1
回答
向内联svg动态添加形状/蒙版
javascript
、
jquery
、
html
、
svg
、
svg-animate
我有一个带有一系列元素的站点,当单击这些元素时,会将内联svg代码添加到该元素中。svg实质上是动画“虹膜擦除”来调整元素为白色。来自单独html文档的代码被加载到一系列div中。当所有的图像都加载完成后,我想在svg代码中附加一个掩码,以使其恢复到原来的状态。 我正在使用检查图像何时加载完成。这是成功的工作。遮罩也被正确地添加到svg中。但是,遮罩会产生动画效果。 以下是添加svg的初始代码: $("#selProject").append('<svg id="circleCont" x="0px" y="0px"
浏览 0
提问于2015-04-02
得票数 4
20
回答
如何修改SVG图片作为背景图片的填充颜色?
html
、
css
、
svg
将SVG输出直接内联到页面代码中,我可以简单地使用CSS修改填充颜色,如下所示: polygon.mystar { fill: blue; } circle.mycircle { fill: green; } 这很有效,但是我正在寻找一种方法来修改SVG的"fill“属性,当它被用作背景图像时。 html { background-image: url(../img/bg.svg); } 现在怎么换颜色呢?这有可能吗? 作为参考,以下是我的外部SVG文件的内容: <svg version="1.1" id="Laye
浏览 8
提问于2012-11-14
得票数 386
回答已采纳
2
回答
用css旋转<img>背景图像
javascript
、
jquery
、
html
、
css
、
image
我尝试使用-webkit-transform从jquery旋转图像,以旋转<img>标记的背景图像。实际上是旋转src图像。我试过:before旋转背景图像,特别是,仍然没有运气。 HTML: <img class="customUpload" id="customUploads" style="height: 581px; background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/
浏览 3
提问于2014-02-15
得票数 1
回答已采纳
1
回答
自定义由SVG <clipPath>裁剪的HTML元素的可见区域
html
、
css
、
svg
我有一个HTML元素,我使用外部SVG中的一个路径来剪辑它,这使得设置如下所示: CSS: video { clip-path: url(path.svg#clip) } HTML: <html> <body> <video src="foo.png" width="480" height="150" /> </body> </html> SVG: <svg width="480px" height="92px" viewBox="
浏览 0
提问于2016-01-30
得票数 2
回答已采纳
1
回答
包含SVG图像的HTML框与图像的高宽比不匹配
html
、
css
、
google-chrome
、
svg
我试图使用默认的preserveAspectRatio="xMidYMid meet"来缩放SVG映像,以适应它的容器,但为了清晰起见,我还是要指定它。使用下面指定的CSS和SVG,缩放工作就像我在Chrome中想要的那样。然而,在IE和Firefox中,问题在于多边形的缩放具有保留的高宽比,但是背景不是。无论容器的高宽比如何,背景仍在填充整个容器。在下面的JSFiddle或代码中,容器的背景应该是绿色的,图像的背景应该是灰色的,灰色部分是一个方形,它限制了蓝色多边形的所有四个角,因为蓝色多边形与正方形viewBox的高度和宽度相同。 换句话说,如果容器的高度>宽度,我希
浏览 6
提问于2013-11-25
得票数 1
回答已采纳
1
回答
如何使<svg>始终符合图像
html
、
css
、
svg
、
frontend
(编辑)我正在尝试制作一个网页,它显示的图像要么填充宽度的50%,要么填充页面高度的80%,这取决于高宽比。我想要始终显示完整的图像,没有任何扭曲,我需要周围的svg是相同的大小与图像在里面。该网页将允许用户绘制图像并保存他们的更改。这必须是动态的,这样任何图像都可以工作。 这是我现在的密码。我期望它在不改变高宽比的情况下将图像缩放到页面宽度的50%,并扩展svg以适应图像周围的情况。但是,svg的高度与图像的高度不匹配。 html: <svg id="svg"> <image href="data:image/png;base64,{{ my
浏览 5
提问于2021-04-29
得票数 2
回答已采纳
3
回答
SVG图像蒙版在Firefox或IE中不起作用
css
、
svg
、
xhtml
我已经很容易地用PNG (黑色圆圈,透明背景)做了一个蒙版,并在chrome等浏览器上使用了-webkit-mask-image:url(images/mask.png)。但是我在使用SVG在Firefox中显示面具时遇到了严重的问题 <svg> <defs> <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"> <image width="78px
浏览 0
提问于2013-05-01
得票数 0
3
回答
背景图像上的Css绝对定位元素(响应)
css
、
responsive-design
、
background
、
css-position
、
absolute
我有一个响应的背景图像,所以它的宽度和高度变化时,调整屏幕。在这个背景下,有一个位置绝对的元素。现在,我的问题是,当调整屏幕大小时,绝对定位元素不会跟随它在背景图像上的位置。 这是我的HTML代码: <section id="all"> <div id="clicked1"> <img class="box" src="factory.svg" width="100%" height="auto"> </div> </sect
浏览 3
提问于2017-03-22
得票数 1
回答已采纳
2
回答
将单个SVG元素呈现到画布或图像
javascript
、
html
、
svg
、
browser
、
render
如何将单个SVG元素(相对于整个SVG文档或其部分)呈现到图像或画布上? 我有一个有很多节点的SVG文档。如果我呈现整个SVG或其中的一部分,则生成的图像将包含其他我不感兴趣的图形。我对一个特定的SVG元素感兴趣,并希望在没有任何其他内容的情况下将其全部呈现出来。 示例: <!DOCTYPE html> <html> <body> <svg height="150" width="150"> <circle cx="50" cy="50" r="25&
浏览 2
提问于2021-09-14
得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
SVG实现可爱的动物哈士奇和狐狸
CSS3 SVG实现可爱的动物哈士奇和狐狸动画
前端福音:为什么使用React和SVG开发图形UI是天作之合?
CSS基础(九)-viewBox(svg
粗谈HTML基础结构与布局
热门
标签
更多标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
活动推荐
运营活动
广告
关闭
领券