使用svg图标作为背景最优雅的方式是什么？

文章/答案/技术大牛

发布

1回答

css、sass、icons

我不是前端专家，我只需要在我的应用程序中使用几个图标，所以我想，与其依赖于像font- and (带有一个很大的css文件)这样的大图标包，我只需要编写我自己的图标css。下面是我想要的(在scss中)： $icon-width: 24px;.thumbs-up { height:$icon-height;

浏览 31提问于2019-10-09得票数 0

1回答

React图标-更改背景颜色

css、reactjs、react-icons

目前在网站上使用react-icons，在svg和样式方面有问题。到目前为止，我已经尝试了使用git代码库中所示的React-Icons {IconContext.Provider}以及fill、stroke。我还尝试添加一个具有上下文提供程序的CSS类，然后在模块中使用CSS属性设置svg的背景色，但似乎也不起作用。设置SVG背景颜色的最简单方法是什么

浏览 18提问于2020-12-15得票数 0

1回答

直接包含SVG时的可访问性

css、html、svg、seo、accessibility

我已经使用样板.ir一段时间，以取代文字的标志和图标图像。text-indent: 100%; content: ""; width: 0;} 但现在我想开始使用svgs作为我的所有图标和标志，当使用svgs作为背景或作为<img>时，您无法控制svg

浏览 2提问于2014-04-17得票数 2

回答已采纳

3回答

如何导入SVG图标

javascript、reactjs、svg、import

我想在应用程序中导入太多的SVG图标&每个图标都需要通过css定制颜色，这是最简单的导入方式吗？导入到<img/>标签将不支持通过css填充的颜色更改。为每个图标创建一个.js组件对于250+图标来说太难了。另一种选择是什么？请帮帮忙import

浏览 4提问于2022-05-10得票数 0

回答已采纳

1回答

设计iPhone界面的最佳方法

iphone、xcode、user-interface

在interface Builder或Photoshop中的界面设计方面，每个人都做些什么？即。设置渐变作为背景，使用pngs作为图标。做这类事情最简单的方法是什么？都是通过代码还是什么？

浏览 0提问于2010-11-16得票数 1

回答已采纳

1回答

用CSS或Javascript动态地格式化(非内联) SVG

javascript、css、svg

在我参与的项目中，我们使用SVG作为图标。我们的大多数图标需要有第二个版本，其中颜色是倒置的(在蓝色图标的白色背景和白色图标的蓝色背景)。我们在CSS中包括使用background-image的图标。我试图找出是否有一种方法，我们可以只有一个文件为每个图标，并使用CSS或Javascript

浏览 3提问于2014-04-24得票数 4

1回答

将复杂SVG图形导入D3图表的最佳方法

javascript、svg、d3.js

假设我有一些相对复杂的SVG图形作为一组文件，例如，如下所示：我想在我的D3动力图表上使用它们。因此，我可以使用<defs>和<use>标记，并将它们作为符号注入。但我想让他们不那么坚实的单一资产，但更像完全活跃和可编辑的图形元素。我知道我可以从图标SVG代码中手动导入所有路径，如下所示： svg.append('path')

浏览 0提问于2014-06-10得票数 1

回答已采纳

2回答

以SVG为背景的彩色叠加

css、svg

我使用生成simple，并使用symbol选项，因此在调用每个SVG时，我可以使用以下简单的方法：使用fill: curre

浏览 2提问于2014-09-29得票数 0

回答已采纳

4回答

将图像放入输入框中

css

类似于但是我怎样才能在盒子的右边和里面得到图标呢？

浏览 8提问于2011-08-15得票数 15

回答已采纳

1回答

包括Mapbox中的图标的泪滴-gl

icons、mapbox、mapbox-gl-js、mapbox-gl

在我的JS代码中，我想创建一个teardrop标记，并在添加tileset时使用addLayer向其添加一个图标，根据某些属性值改变图标。添加图层时，在布局选项下有一个图标-图像设置，用于选择图标。这样，我可以选择maki teardrop标记-15，也可以选择当前支持的其他maki图标之一。我想做的是将其他图标放在泪滴上，并为泪滴上色，作为经典的图标上的

浏览 23提问于2020-04-23得票数 0

2回答

如何使用图标作为“背景图像”而不是CSS中的图像

html、css、icons、font-awesome-5

我想使用一个图标作为背景图像，而不是使用任何图像。有办法这样做吗？background-image: url(...)url() 请帮帮我，CSS专家。

浏览 1提问于2019-09-14得票数 3

回答已采纳

2回答

React native:推荐使用PNG或SVG图像吗？

image、react-native、svg

我正在做一个原生react项目，我有超过30个SVG格式的图标。我想知道是建议将这些图像转换为PNG，还是更好地将其用作SVG文件。如果使用图像作为SVG更好，那么在react原生上显示SVG文件的最佳方式是什么？

浏览 25提问于2019-08-01得票数 5

回答已采纳

1回答

React中的SVG图标不显示

html、css、reactjs、svg

我在React中上传SVG图标时遇到了问题。我给webpack添加了svg-inline-loader，但是它没有显示图标。它只显示未找到的图片。我想添加SVG图标作为img源，背景图像和快捷方式图标。这是我的webpack.configentry: ["whatwg-fetch", ".ext]&#x

浏览 0提问于2018-04-11得票数 0

1回答

为Android VectorDrawable添加背景

android、android-drawable、android-vectordrawable、android-icons

作为我的logo的背景，我的设计师给了我一个svg文件。我在可绘制的自适应图标中添加了背景，但不幸的是，创建矢量可绘制ic_background的AndroidStudio工具忽略了在文档首选项中设置的svg文件的白色背景。添加我的白色背景最好的方法是什么？

浏览 71提问于2019-07-22得票数 0

2回答

如何将SVG路径作为cytoscape.js节点的前景样式？

svg、foreground、cytoscape.js

如何设置cytoscape.js中用作节点的SVG元素的前景色？我熟悉在DOM中设置SVG路径元素的id，然后使用CSS对它们进行样式设置。有类似的可能性吗？

浏览 8提问于2016-07-14得票数 1

回答已采纳

1回答

我可以更改XFCE中面板图标的外观吗？

panel、xfce

我想让通知和工作区符号(都在所谓的面板1中)变得更亮一些。或者把他们变成任何能让他们更容易分辨的东西。📷从我的角度来看，有没有人会对如何改善这个问题有任何建议呢？(我问这个特别的

浏览 0提问于2013-02-08得票数 1

回答已采纳

2回答

包裹-加入svg雪碧

svg、webpack、sprite、parceljs

同事们，我正在尝试Parcel作为webpack项目建设者的替代方案，我很喜欢它，但是有两个我仍然无法克服的问题(下面是启动构建的链接- 和)：在包程序集中没有这样的插件，我试着安装，但是它没有编译单独的sprite (至少我在文档中没有找到

浏览 3提问于2021-11-16得票数 0

2回答

如何将基于百分比的定位应用于纯CSS背景图像精灵？

css、button、background、icons、sprite

我有一个有按钮图标的SVG精灵。图标作为背景图像添加到HTML链接元素中。 100%水平偏移使雪碧的右侧对齐按钮的右侧。如果一个精灵有8个图标，应用50%作

浏览 6提问于2013-12-08得票数 2

回答已采纳

1回答

在SVG中使用图标

html、dom、svg、icons

我有一个PNG图像，我在我的超文本标记语言中使用它作为<i>元素的背景图像。我需要在SVG中使用这个图标。将<i>放在<foreignObject>中会呈现该图标，但会导致许多其他问题。有没有办法在不使用HTML标签的情况下在SVG中获得图标效果？

浏览 1提问于2013-06-07得票数 0

回答已采纳

3回答

svg周围的<a>链接行为奇怪

javascript、jquery、html、css、svg

在我的网站上我有svg图标，我使用了这个脚本： <a href="https://open.spotify.com/" target="_blank" class="svg-link"><img src="<?>/svg/play-white.svg<

浏览 0提问于2017-11-07得票数 0

点击加载更多