使⽤简单CSS操作SVG图标
本⽂是由三部分组成的系列⽂章的第⼆篇，该系列⽂章将展⽰将提供的新的图像学⽅法。
⽤CSS样式图标
智能图标引起了⼈们的极⼤兴趣，但样式可能是每天最有⽤的功能。 图标集涵盖了⼴泛的不同主题，但以单⼀视觉样式呈现。 如果不是最佳的话，这通常是适当的。 但是，在许多情况下，特定的图标可以并且应该具有特定的样式（颜⾊，笔触宽度或其他属性）。
静态图⽚⽆法进⾏样式设置（除⾮您针对每种特定的美感输出⽂件）。 图标字体通过允许简单的样式使我们更接近，但它不是细粒度的-意味着如果将图标涂成红⾊，则整个图标将是红⾊。 使⽤SVG，可以⾃由设置图标中各个元素的样式，从⽽开辟了全新的可能性。
⼀个图标，⽆限的可能性
SVG和CSS的结合是神奇的。 图像可以呈现完全不同的外观，经过定制的处理以及有趣的交互式过渡。 SVG标记提供对其中包含的所有元素的访问和控制。 这意味着可以使⽤CSS对灯泡图标进⾏“点亮”，可以对对⽐度图标进⾏样式设置以反映特定的对⽐度，⽽信号灯图标可以传达go信息 。 能够在元素级别进⾏样式设计为图标注⼊了新的活⼒-它们可以是真正独特的 。
图标主题
使⽤CSS对图标进⾏样式设置的下⼀个逻辑步骤是创建范围⼴泛的主题，以实现⼀致的美观。 我们对Iconic的关注重点之⼀就是揭露和应对围绕图标主题的挑战。 通常，设置⼀组图标的样式（除了简单地更改颜⾊之外）是⼀项艰巨的任务，它依赖于具有源⽮量⽂件。 没有它们吗？ 好吧，你不⾛运。
SVG图标可以解决此问题。 我之所以说“可以”，是因为很难始终如⼀地构造整个SVG图标集。 图标的设计和构建必须考虑主题，以使样式在整个集合中保持⼀致。 但是，当它起作⽤时，它看起来很棒。
我们整理了⼀个演⽰来展⽰图标主题。 它向您显⽰了将CSS规则应⽤于整个图标集时可以完成多少⼯作。
有趣的⽤例
图标样式不仅可以进⾏任意颜⾊更改，⽽且可以做得更多。 这种⽅法使我们有机会提供另⼀个有价值的信息层。
提供简单的上下⽂信息
想⼀想您在界⾯中看到的所有显⽰上下⽂信息的图标。 只需考虑⼀下各种应⽤程序中的画笔或填充图标即可传达您将要绘制或填充的颜⾊。 设计成样式的SVG图标可以做到这⼀点。
样式状态
图标内的通信状态通常与使⽤颜⾊⼀样简单。 图标字体已经可以实现这⼀点，但是如果您想超越简单的颜⾊开关该怎么办？ 这是SVG和CSS的另⼀个完美⽤例。 例如，让我们看⼀下WIFI信号图标。
这个怎么运作
注意：下⾯的⽰例仍然是概念验证原型。 以下代码都不是最终的代码，更不⽤说beta了。 我们仍处于此⽅法的研发阶段，并且我们知道仍有许多问题需要解决。 在Kickstarter活动结束后，我们将为这种⽅法的更具体的⽅向进⾏研究。
图标样式的机制⾮常简单。 如果您过去曾经使⽤过CSS（我们假设您曾经使⽤过），那么⼏乎没有什么要学习的。 这就是使这种⽅法如此出⾊的部分-使⽤您已经知道的技能和⼯具，它的功能⾮常强⼤。 SVG样式具有⼀组 ，您需要学习这些 ，但是这些概念⾮常简单，只需花很少的精⼒即可掌握。
真正的⼯作来⾃于设计和构造⼀个实际上可以样式化的图标。 就像 ，此⽅法依赖于将SVG直接注⼊到DOM中，并在语义上进⾏结构化以进⾏样式设置。 这远不只是将类添加到SVG图标中的每个元素（但这并不有害）。 启动图标进⾏样式设置仍然有些艺术形式。 我们⾮常确定这是⼀门科学，我们希望将来能更多地介绍该过程。 Iconic的⽬标是帮助使此过程清晰可重复，以便其他图标设计⼈员可以使他们的图标样式化。
让我们以设置WIFI信号图标的样式为例，以显⽰其各种状态。 您将很快看到它是多么平易近⼈。
HTML
<img src="signal.svg" class="svg-inject" alt="signal" />
JS
$('.svg-inject').svgInject();
CSS
/*Strong signal*/
.iconic-signal.iconic-signal-strong .iconic-signal-base {
fill:#569e26;
}
.iconic-signal.iconic-signal-strong .iconic-signal-wave * {
stroke:#569e26;
}
/*Medium signal*/
.iconic-signal.iconic-signal-medium .iconic-signal-base {
fill:#efc411;
}
.iconic-signal.iconic-signal-medium .iconic-signal-wave * {
stroke:#efc411;
}
.iconic-signal.iconic-signal-medium .iconic-signal-wave-outer {
opacity:.3;
stroke-width:.5;
}
/*Weak signal*/
.iconic-signal.iconic-signal-weak .iconic-signal-base {
fill:#b52808;
fill:#b52808;
}
.iconic-signal.iconic-signal-weak .iconic-signal-wave * {
stroke:#b52808;
}
.iconic-signal.iconic-signal-weak .iconic-signal-wave-outer ,
.
iconic-signal.iconic-signal-weak .iconic-signal-wave-middle {
svg图
opacity:.3;
stroke-width:.5;
}
/*No signal*/
.iconic-signal.iconic-signal-none .iconic-signal-base {
fill:#848484;
}
.iconic-signal.iconic-signal-none .iconic-signal-wave * {
stroke:#848484;
opacity:.3;
stroke-width:.5;
}
SVG：signal.svg
<svg version="1.1" class="iconic iconic-signal" xmlns="/2000/svg" xmlns:xlink="/1999/xlink" x="0px" y="0px" width="11.26px" h  <path class="iconic-signal-base" d="M6.337,7.247c-0.391-0.391-1.023-0.391-1.414,0l0.708,0.708L6.337,7.247z"/>
<g class="iconic-signal-wave">
<path class="iconic-signal-wave-inner" fill="none" stroke="#000000" stroke-miterlimit="10" d="M7.62,5.966c-1.098-1.098-2.88-1.098-3.977,0"/>
<path class="iconic-signal-wave-middle" fill="none" stroke="#000000" stroke-miterlimit="10" d="M9.31,4.275C7.278,2.244,3.984,2.245,1.952,4.276"/>
<path class="iconic-signal-wave-outer" fill="none" stroke="#000000" stroke-miterlimit="10" d="M10.9,2.684c-2.911-2.911-7.629-2.911-10.54,0"/>
</g>
</svg>
还不错吧？ 正确设置了SVG图标的样式后，其余的操作就会下坡！
使⽤SVG 2.0可能会更好
如您所见，您可以使⽤SVG和CSS做很多事情 ，但是仍然有⼀些限制。 我们遇到的主要问题之⼀是笔触对齐。 SVG 1.1中的所有笔触都是中⼼对齐的，这意味着笔触将在路径的每⼀侧平均分配。 由于种种原因，我们认为这不是图标设计的最佳选择，其中包括在增加笔触权重时可能出现的削波，以及适应中⼼对齐笔触的更复杂的绘制过程。
幸运的是，此问题已在SVG 2.0中修复-笔触现在可以居中对齐，内部对齐和外部对齐。 不幸的是 ，似乎SVG 2.0仍然遥遥⽆期。 我们希望Iconic将有助于激发⼈们对SVG的更多兴趣，并⿎励更快速的过程。
结论
Iconic的样式在Iconic中被忽略了⼀点，但是我们认为它是⼀种⾮常强⼤的技术。 我们坚信，将来它将
对⼈们使⽤和查看图标的⽅式产⽣巨⼤影响。 这项技术的妙处在于该技术已经得到⼴泛⽀持-您所需要的只是可以利⽤它的图标。
的⽬标是帮助提供新的图像学⽅法。 我们还有很多要与您分享的内容，并期待与您分享下⼀批内容。
请考虑

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。