您可以使用CSS修改已加载的SVG背景图像吗? [英] Can you modify a loaded SVG background-image with CSS?

问题描述

我们首次将SVG用于基于移动HTML5的应用程序sprites文件(它们使处理视网膜的其他屏幕尺寸差异变得容易).

We're using SVGs for the first time for our mobile HTML5 based app sprites file (they make dealing with retina an other screen size differences easy).

我知道生成的SVG可以直接操作(因为它们是文本文件)，但是可以通过CSS或脚本修改SVG资产(在这种情况下，是通过CSS加载的背景图片)吗?

I know generated SVGs can be manipulated directly (as they are text files) but can one modify an SVG asset (in this case, a background image loaded via the CSS) via CSS or scripting?

例如，我们可以加载全黑的SVG对象，然后将其更改为白色吗?

For instance, can we load an all-black SVG object, and then change it to white?

推荐答案

如果SVG文件作为图像加载(通过img或background-image)，则无法访问SVG文件的DOM.您也无法通过CSS设置样式.

You can't access the DOM of the SVG file if it's loaded as an image (either through img or background-image). You can't style it via CSS either.

如果打算执行此类操作，则应将SVG附加到div.您仍然应该能够对该div执行类似sprite的操作.您将能够通过CSS或javascript设置样式.

If you intend to do these kind of manipulations you should append the SVG to a div. You should still be able to perform sprite-like manipulations to that div. You will be able to style it via CSS or javascript.

应该内联SVG.您可以将SVG复制并粘贴到用于包含background-image的div中，也可以通过ajax请求将其加载到其中.

The SVG should be inlined. You can copy and paste the SVG into the div that used to contain background-image or load it there through an ajax request.

您可以为left或-webkit-transform: translate(...)设置动画，而无需为background-position设置动画.

Instead of animating background-position you can animate with left or -webkit-transform: translate(...).

这篇关于您可以使用CSS修改已加载的SVG背景图像吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！