Question

我的团队正在转向svg图标我们用来定义css样式类中的图标，现在正在考虑是否应该将SVG图标实现为视图组件渲染svg标记（而不是html）。这应该允许通过改变尺寸，颜色等来更好地重用svg。另一方面，这会使图标脱离样式域，任何样式更改都会导致代码更改（而不仅仅是css更改）。

什么是正确的方式（如果有的话）使用svg图标，控制大小和颜色，还是保存样式图层和视图层？

Answer 1

SVG编辑有时会将样式信息内联，但SVG的样式信息也可以在<style>标记内提供，就像通常的CSS一样。

如果SVG在您的DOM中（最简单的方法是将SVG直接写入HTML），SVG可以直接从您常用的CSS文件格式化：

＆＃13;

p {
  color: #666;
}

.blueTriangle {
  fill: lightblue;
  stroke: #666;
  stroke-width: 8;
}

＆＃13;

<p> This is usual text in HTML p tags. </p>
<p> The next thing is embedded SVG, styled by usual CSS: </p>

<svg width="250" height="120">
  <path class="blueTriangle" d="M150 20 L130 90 L170 90 Z" />
</svg>

＆＃13;

transform同时缩放和轮换can be done，可以通过display，visibility或opacity different implications来展示不同的组件。

更改路径本身将被视为更改文件的内容，可以通过JavaScript完成。因此，仍然可以保留样式和内容的分离。

svg图标属于样式图层和视图图层吗？

1 个答案: