SVG:使用属性还是CSS进行样式设置?

本文介绍了SVG:使用属性还是CSS进行样式设置?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在HTML中，建议将内容与样式分开，因此您应该为样式创建外部CSS文件.当我刚开始使用SVG时，我现在想知道:此规则是否也适用于SVG?

In HTML it is recommended to seperate Content from Style, thus you should create external CSS-Files for your styles. As I am just getting started with SVG I now wonder: Does this rule also apply for SVG?

什么是更好的代码风格?

What is considered better code style?

<circle fill="yellow" />
或<circle style="fill: yellow;" />

<circle fill="yellow" />
or <circle style="fill: yellow;" />

推荐答案

与<circle style="fill: yellow;" />相比，我通常更喜欢<circle fill="yellow" />，因为它更短并且易于使用，例如getAttributeNS(null, "fill").

I would generally prefer <circle fill="yellow" /> to <circle style="fill: yellow;" /> because it's shorter and easily to manipulate with, for example, getAttributeNS(null, "fill").

但是除此之外，我更喜欢使用单独的样式元素，就像HTML一样，例如:

But over that I would prefer using a separate style element, just as with HTML, e.g:

  <style>
    circle{
      fill: yellow;
    }
  </style>

使用CSS具有所有相同的优点，例如可以轻松一次更改很多元素的样式.

Which has all the same advantages of using CSS, such as making it easy to change the stlye of lots of elements at once.

您还可以将CSS放在外部文件中并添加:

You can also put your CSS in an external file and add:

<?xml-stylesheet type="text/css" href="your_CSS.css" ?>

在svg元素之前.

这篇关于SVG:使用属性还是CSS进行样式设置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Fill