这是我提出的一段方便的代码的自我问答。

目前，还没有一种简单的方法来嵌入SVG图像，然后通过CSS访问SVG元素。使用JS SVG框架有多种方法，但如果您所做的只是制作一个带有翻转状态的简单图标，那么这些方法就过于复杂了。

所以这就是我想到的，我认为这是迄今为止在网站上使用SVG文件的最简单的方法。它的概念来自于早期的文本到图像替换方法，但据我所知，还从未用于svg。

问题是这样的:

我如何在CSS中嵌入SVG并改变其颜色而不使用JS-SVG框架?

将SVG输出直接内联到页面代码中，我可以简单地用CSS修改填充颜色，如下所示:

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

这工作得很好，但是我正在寻找一种方法来修改SVG的“填充”属性，当它作为背景-图像时。

html {      
    background-image: url(../img/bg.svg);
}

我现在怎么改变颜色?这可能吗?

作为参考，以下是我的外部SVG文件的内容:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>

是否有可能为svg元素设置投影使用css3之类的东西

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

我看到一些关于使用滤镜效果创建阴影的说明。有单独使用css的例子吗?下面是正确应用cusor样式的工作代码，但没有阴影效果。请帮助我用最少的代码得到阴影效果。

SVG .shadow { 光标:十字丝; -moz-box-shadow: -5px -webkit-box-shadow: 5px #888; 盒子阴影:5px #888; ｝ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 120 70"> <矩形类=“影子”x = " 10 " y = " 10 "宽度= " 100 "高度=“50”填补= " # c66 " / > < / svg >

是否可以在SVG填充颜色上设置透明度或alpha级别?

我尝试向填充标记添加两个值(将其从fill="#044B94"更改为fill="#044B9466")，但这不起作用。

动态创建元素并能够移动它们的最佳方法是什么?例如，假设我想创建一个矩形、圆和多边形，然后选择这些对象并移动它们。

我知道HTML5提供了三个元素，可以使这成为可能:svg, canvas和div。对于我想做的事情，这些元素中哪一个将提供最佳性能?

为了比较这些方法，我想创建三个视觉上相同的网页，每个网页都有一个页眉、页脚、小部件和文本内容。第一个页面中的小部件将完全使用canvas元素创建，第二个页面完全使用svg元素创建，第三个页面使用普通div元素、HTML和CSS创建。

我有一个定义为16x16大小的SVG文件。当我使用ImageMagick的转换程序将其转换为PNG时，我得到了一个16x16像素的PNG，太小了:

convert test.svg test.png

我需要指定输出PNG的像素大小。-size parameter似乎被忽略了，-scale parameter在PNG被转换成PNG后缩放。到目前为止，我使用-density参数得到的最好结果是:

convert -density 1200 test.svg test.png

但我并不满意，因为我想指定以像素为单位的输出大小，而不做数学运算来计算密度值。所以我想这样做:

convert -setTheOutputSizeOfThePng 1024x1024 test.svg test.png

这里我要用到的神奇参数是什么?

在构建网站或界面等时，什么时候应该使用特定的图像文件类型?

他们的优点和缺点是什么?

我知道PNG和GIF是无损的，而JPEG是有损的。 但是PNG和GIF的主要区别是什么呢? 为什么我要选择一个而不是另一个呢? 什么是SVG，什么时候应该使用它?

如果你不关心每一个像素，你应该总是使用JPEG，因为它是“最轻”的?

html

<img src="logo.svg" alt="Logo" class="logo-img">

css

.logo-img path {
  fill: #000;
}

上面的svg加载并本机填充:#fff，但当我使用上面的css尝试将其更改为黑色时，它没有改变，这是我第一次使用svg，我不知道为什么它不工作。

我应该使用<img>， <object>，或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?

每一个代码是什么，以确保它工作得尽可能好?(在我的研究中，我看到了包括mimetype或指向备用SVG渲染器的参考，但没有看到一个良好的艺术状态参考)。

假设我正在使用Modernizr检查SVG支持，并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。

我想使用这种技术并更改SVG颜色，但到目前为止我还不能这样做。我在CSS中使用这个，但我的图像总是黑色的，无论如何。

我的代码:

.change-my-color { 填充:绿色; ｝ svg < > <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src=" ppngback .png" /> < / svg >