在 SVG 中使用尽可能多的 <style> 元素/属性是否有好处？答案

【问题标题】：Is there a benefit to using as much <style> elements/attributes as possible in SVG?在 SVG 中使用尽可能多的 <style> 元素/属性是否有好处？
【发布时间】：2019-09-05 01:48:52
【问题描述】：

下面我用两种样式编写了相同的 SVG 文件：一种（几乎）有尽可能多的 <style> 元素/属性，另一种没有。两者除了字数和美观有什么实际区别吗？

我最好的猜测是，如果有的话，答案与向后兼容性、性能和/或从 SMIL 到 CSS 动画/Web 动画 的过渡有关，但这些只是在黑暗中拍摄。不过，我主要关心的是兼容性部分。

带有<style>元素/属性：

<svg xmlns="http: //www.w3.org/2000/svg" viewBox="-50 -50 200 200">
  <style>
    path, .path {
      fill: none;
      stroke: #000;
      stroke-width: 2.25;
    }
  </style>
  <rect style="fill: none; x: -50; y: -50; width: 200; height: 200;"/>
  <rect class="path" style="fill: #fff; x: 1.125; y: 1.125; width: 97.75; height: 97.75;"/>
  <rect style="x: 34; y: 87.5; width: 2.5; height: 2.5;"/>
  <path d="M41,84 q3,1 9,1 t9,-1"/>
  <polygon points="45,80 50,71 55,80 50,78"/>
  <polygon points="67,77 62,73 62,76"/>
  <polygon points="33,77 38,73 38,76"/>
  <circle style="cx: 73.5; cy: 71; r: 5;"/>
  <circle style="cx: 26.5; cy: 71; r: 5;"/>
  <path d="M63.5,71 q3,-5 10.5,-5 t10.5,5"/>
  <path d="M15.5,71 q3,-5 10.5,-5 t10.5,5"/>
  <polygon points="86,64 76,58 64,60 63,64 77,62"/>
  <polygon points="14,64 24,58 36,60 37,64 23,62"/>
</svg>

没有<style>元素/属性：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 200 200">
  <rect fill="none" x="-50" y="-50" width="200" height="200"/>
  <rect fill="#fff" stroke="#000" stroke-width="2.25" x="1.125" y="1.125" width="97.75" height="97.75"/>
  <rect x="34" y="87.5" width="2.5" height="2.5"/>
  <path fill="none" stroke="#000" stroke-width="2.25" d="M41,84 q3,1 9,1 t9,-1"/>
  <polygon points="45,80 50,71 55,80 50,78"/>
  <polygon points="67,77 62,73 62,76"/>
  <polygon points="33,77 38,73 38,76"/>
  <circle cx="73.5" cy="71" r="5"/>
  <circle cx="26.5" cy="71" r="5"/>
  <path fill="none" stroke="#000" stroke-width="2.25" d="M63.5,71 q3,-5 10.5,-5 t10.5,5"/>
  <path fill="none" stroke="#000" stroke-width="2.25" d="M15.5,71 q3,-5 10.5,-5 t10.5,5"/>
  <polygon points="86,64 76,58 64,60 63,64 77,62"/>
  <polygon points="14,64 24,58 36,60 37,64 23,62"/>
</svg>

【问题讨论】：

我更喜欢将所有内容都放在 CSS 中，因为这样可以减少冗长并且更易于阅读

标签： css svg css-animations

【解决方案1】：

它们都有相同数量的 CSS 样式。许多SVG attributes map to CSS properties。在第二个示例中，这就是您正在做的事情。除了 CSS 特异性略有不同之外，其他一切都相同。

【讨论】：

我在the spec for SVG 2 中发现了一些有趣且相关的东西：“将来，适用于 SVG 内容的任何新属性都不会获得表示属性。因此，建议作者使用样式属性，或者通过内联 ‘style’ 属性或样式表，而不是表示属性，用于设置 SVG 内容的样式。”
注意：SVG 中对geometry properties 的支持仍然有限。对于具有几何属性的元素，Firefox 会显示 Invalid property name 警告，Illustrator 会将这些元素转换为 <polygon points="0,0 0,0 0,0 "/>，而 Inkscape 根本不会渲染这些元素。我会避免几何属性，只坚持位置和尺寸的表示属性，至少在支撑稳定之前。这样做还可以与没有几何属性的元素保持一致，例如’text’。
澄清：我的问题示例中的<rect> 和<circle> 元素（例如<circle style="cx: 26.5; cy: 71; r: 5;"/>）在Illustrator 中打开时会转换为<polygon points="0,0 0,0 0,0 "/>。
好吧 Firefox 支持 SVG 2 的几何属性。虽然我承认这种支持是最近才出现的，但它不会显示无效的属性名称。