Safari中的SVG片段Sprite + CSS背景图像

文章/答案/技术大牛

发布

1回答

css、svg、sprite、sprite-sheet

我在一个网站上工作，在那里我使用SVG片段文件，并通过CSS背景图像加载特别的SVG。: url(sprite-collection.svg#arrowright),} 问题是，它似乎可以在大多数浏览器上很好地工作，但在桌面和IOS浏览器上的Safari中，SVG不会出现，只是显示一个空

浏览 17提问于2017-07-07得票数 7

1回答

检测浏览器对SVGFragmentIdentifier的支持

javascript、jquery、css、svg

</g><g class="sprite" id="icon3">...</g>当然，我是通过CSS背景等方式使用SVG文件的： background-image: u

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

1回答

减文件扩展变量

jquery、css、less

下面是我所做的事情的基本情况。 });问题是，对于我的雪碧混音器，我使用： @sprite-Grid: 23px;/img&#x

浏览 1提问于2013-06-04得票数 2

回答已采纳

3回答

webpack 4给出背景: url([object Module])作为bg图像

javascript、webpack、webpack-4、svg-sprite

我在设置web-pack 4和svg-sprite-loader以将svg图标渲染为背景图像时遇到了问题。我按照svg-sprite-loader ()的官方文档中的说明进行操作。我已经成功地在dist文件夹中创建了sprite.svg文件，并将其作为我在html中使用标签的引用。但是，我也尝试使用src/images/ico

浏览 5提问于2019-08-27得票数 12

1回答

如何设置由gulp sprite npm软件包导入的元素svg背景的宽度和高度？

html、css、svg、gulp

对于我的项目(网站)，我使用一个名为的NPM包，它将我所有的SVG映像放入一个文件sprites.svg中并生成sprites.css。在sprites.css中，有些CSS类将其background-image属性设置为sprite.svg中的svg图像。background-image: url(/img/

浏览 1提问于2019-07-04得票数 0

1回答

支持复制和粘贴的Svg精灵

html、svg、emojione、svg-sprite

以下是我在我的网站上尝试的示例代码的一个变体： <description>🐳</description></svg>

浏览 3提问于2017-04-08得票数 0

1回答

SVG雪碧不在Safari工作

html、svg、safari、sprite

对于web开发人员来说，Safari并不比IE更好。这是我在Safari中看到的问题。 ...</svg> HTML中的<img>通过在sprite url中添加<view>的"#“+ id来定

浏览 4提问于2016-03-04得票数 2

回答已采纳

2回答

如何对iOS上的CSS背景图像使用SVG片段标识符？

css、svg、background-image、sprite、fragment-identifier

我在CSS背景图像中使用sprite和引用片段标识符。CSS代码如下所示：background: url(sprite.svg#icon-1);。(这里有一个更短的url，便于移动设备访问: goo.gl/P9xG4E)在Android4.4.2上，与Firefox和Google不同，内置的Android浏览器不支持这项功能。

浏览 3提问于2016-09-03得票数 0

回答已采纳

2回答

我怎样才能做一个上票/下票按钮？

html、css、xhtml、stylesheet、styling

这只是为了样式，我正试着像在SO和Reddit上一样投赞成票/反对票，从我可以看到的是，他们使用箭头图像作为背景，然后定位它，但我是一个CSS新手，我需要有人带我完成它。提前谢谢。

浏览 0提问于2010-11-25得票数 27

回答已采纳

4回答

网页中的SVG图像有没有与spriting等价物？

css、svg、css-sprites

SVG图像不是位图，所以(除非我遗漏了什么)你不能像在网页上使用的其他图像文件那样做spriting (参见)。div.my-special-svg-div { background-image: url(sprite-image.svg#one-s

浏览 0提问于2010-10-28得票数 9

回答已采纳

6回答

SVG仅在safari中悬停时调整大小

javascript、jquery、css、svg

我有一个奇怪的问题，在safari中svg在悬停时调整大小。我正在使用jquery的悬停功能将页面上的svg替换为稍有不同的svg。这项工作在所有浏览器中都是正确的，除了safari，由于某种原因，safari会在鼠标悬停和鼠标输出时完全调整svg的大小。我的svg高度是在css中</

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

1回答

SVG sprite:如何处理大小？

svg、sprite

我正在寻找一个很好的解决方案来与SVG精灵一起工作。目前我有一个包含svg文件的文件夹，使用我得到了一个SVG精灵图像和一个带有背景图像定义的CSS文件。现在我想用sprite SVG替换我的单文件SVG，但是我不能调整它们的大小。其中一些文件在原始文件中的大小不正确。我尝试了许多宽度，高度

浏览 1提问于2015-09-21得票数 3

4回答

有没有像使用CSS3的底部导航这样的iphone预建示例？

iphone、css、mobile-safari

有没有像使用CSS3的底部导航这样的iphone预建示例？有没有可能在CSS3中制作这些没有图像的图标？ 

浏览 1提问于2011-04-14得票数 3

回答已采纳

3回答

CSS背景中的SVG在Safari中不显示

html、css、svg、safari

下面的代码在Safari中不起作用，图像也不显示。这只在Safari中发生，它在所有其他浏览器中都有效，我不知道为什么。下面是CSS代码： background: url(images/cards.svg) no-repeat center center fixed; margin-bottom:20px;和HTML代码： <

浏览 1提问于2014-03-16得票数 9

回答已采纳

1回答

通过CSS仅针对我的图像精灵

css、css-sprites

网址：<a class="ben-logo" href="/"></a> 您可以看到，CSS为该部分中的任何链接提供了浅背景色，这也应用于图像sprite。我试图从我的图像中</

浏览 0提问于2013-04-15得票数 0

回答已采纳

7回答

为"src“属性设置动画

jquery、html、css、hover

它看起来是这样的：当用户悬停"stackinfo“图片时，我希望它看起来像这样：我的image代码：我知道如何在悬停时更

浏览 3提问于2012-11-10得票数 4

回答已采纳

1回答

在Vue JS中使用SVG* Sprite作为CSS背景图像*

css、vue.js、svg

如果我像这样在Vue JS HTML模板中设置一个SVG sprite文件，它会工作得很好： <use xlink:href="~@/assets/images/icons.svg#edit"></use>icons.svg文件看起来像这样： <svg

浏览 2提问于2020-05-06得票数 0

1回答

Safari以不同的字体呈现SVG中的文本

svg、safari、mobile-safari

我在一个网站上使用SVG，除了Safari之外，一切都很好。Safari显示SVG的字体与我用于图形的字体完全不同。 Correct Rendering 这就是它应该显示的方式。Safari Rendering 这就是Safari呈现它的方式。我没有在网页设计中使用SVG的经验，但我会使用CSS将其设置为背景图像。我不知道我做

浏览 15提问于2019-04-12得票数 0

1回答

Safari 8.0.3中的CSS内联UTF编码SVG-404错误

css、svg

在CSS文档中，我使用了UTF编码的SVG片段作为背景图像，如下所示： background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="1

浏览 2提问于2015-02-02得票数 1

1回答

CSS: IE/Safari中的背景大小容器和定位

css、background-image

你好，我对IE11/Safari5中响应式CSS背景图像的行为有点困惑，它在Chrome和Firefox中工作得很好： background:url('images/logo.svg') right top no-repeat; display:inline-block;max-wi

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

点击加载更多