css - SVG 元素的字体可以在 CSS 文件中声明吗？

Question

有什么方法可以从链接的 CSS 文件中定义/更改/设置 SVG 元素的字体属性？还是所有这些数据都必须固定到 SVG 文件本身？强调“固定”。恶心。

换句话说，做下面这样的事情是否有效？

SVG:

<svg>
  <g id="buttonText">
    <text id="buttonTextShadow">CLICK ME</text>
    <text id="buttonTextColor">CLICK ME</text>
  </g>
</svg>

CSS:

#buttonTextColor, #buttonTextShadow  { font-family: "OpenSans"; }
#buttonTextColor { color: #fff; }
#buttonTextShadow { color: #333; }

如果能够从样式表中定位和设计这些东西会很好……如果没有，我会适应……:P

TIA!

WR!

Answer 1

这似乎有效，您可以根据需要直接定位 id。

<svg>
  <defs>
    <style type="text/css">
      @font-face {
        font-family: "OpenSans";
        src: url('/path/to/font.woff');
      }

      #buttonText {
        font-family: "OpenSans";
      }
    </style>
  </defs>
  <g id="buttonText">
    <text id="buttonTextShadow">CLICK ME</text>
    <text id="buttonTextColor">CLICK ME</text>
  </g>
</svg>