svg 外部样式表不起作用答案

【问题标题】：svg external stylesheet not worksvg 外部样式表不起作用
【发布时间】：2018-05-10 21:55:41
【问题描述】：

我是新的 svg 学习者，并尝试使用外部样式表为 svg 文件设置动画，但未能设置我的对象“Cube”的样式。

[index.html 文件]

      <head>
        <link rel="stylesheet" type="text/css" href="cube.css">
      </head>
      <body>
        <img src="cube-motion.svg" height="350px" />
        <div class="logo">
          <h1>SVG Cube Animation</h>
        </div>

[cube-motion.svg 文件]

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="cube.css" ?>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">

<g>
    <polygon id="l1" class="st0" points="105.3,92.7 86.3,103.3 67.3,92.9 67.1,71.9 86,61.2 105.1,71.6   "/>
    <polyline id="l2" class="st1" points="67.1,71.9 86.2,82.5 86.3,103.3 67.1,93.1 66.9,71.9    "/>

    <animateTransform
        attributeName="transform"
        type="translate"
        from="0 0"
        to="0 75"
        begin="0s"
        dur="3s"
        repeatCount="indefinite"
        />
</g>

</svg>

[外部样式表文件cube.css]

 .st0 {
        fill:#FF00FF;
        stroke:#000000;
        stroke-miterlimit:10;
    }

.st1 {
        fill:#23D83C;
        stroke:#000000;
        stroke-miterlimit:10;
    }

.logo {
    position: absolute;
    left: 400;
    top: 150;
  }

【问题讨论】：

为了使用 CSS 设置 SVG 样式，必须将其包含在内。有关 SVG <img> 替换的想法，请参阅 How to change color of SVG image using CSS。另见img src SVG changing the fill color。
见stackoverflow.com/questions/21524040/…

标签： html svg external stylesheet

【解决方案1】：

在 SVG 中包含外部样式表，您走在正确的轨道上：

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

它不起作用的原因是 SVG 在 HTML 中作为 <img> 加载 - 理所当然 - 不允许处理额外的外部资产。

如果您坚持使用来自外部文件的 CSS，您有两个选择，将 SVG 嵌入到 html 中或使用 <object data=file.svg type=image/xml+svg></object>。

根据您的用例，您基本上可以通过三种方式使用 CSS 进行样式设置：

<img src="my.svg">

图像不是交互式的，并且不允许在其内部加载任何其他资产。仅对引用的图像文件进行简单介绍。它确实允许使用 CSS，但只能来自 SVG 内的 <style>-元素。

<object data="my.svg" type="image/svg+xml"></object>

对象可以做的不仅仅是图像，例如加载额外的资产，甚至包括隔离的（在加载的 SVG 中）交互（例如 CSS :hover-pseudoclass）加载外部 CSS 文件的方式与示例代码中的一样，<?xml-stylesheet...?>-指令位于 <svg>-tag 之前

<svg...>...</svg>

完全嵌入在 HTML 文档中，这允许在页面内完全集成（这可能对交互方面有好处，但对 CSS 方面不利，因为您必须考虑样式隔离），但是也是最不可重复使用的，因为您基本上必须重复整个 SVG，如果在页面上使用一次也没关系。请注意，为了将 SVG 嵌入 HTML 文档，您不能在 HTML 中放置任何 SVG doctype 和/或 xml 声明（<?xml...?>、<!DOCTYPE svg...> 和 <?xml-stylesheet...?>）。使用嵌入式 SVG，您可以使用通常的 HTML <link> 或 <style> 节点简单地导入（或内联）样式，其中 <style> 元素也可能仍位于 <svg> 元素内。

这是quick sample of the difference between <img> and <object>

【讨论】：

SVGStyleElement 的type 属性不是强制性的，如果未设置，它将回退到'text/css'。 HTML5 不知道命名空间属性，因此内联时不需要xmlns。加载在框架元素中的独立 svg（<embed>，<iframe><object>）与内联元素一样强大，它们也可以运行 js，具有不会污染主文档的附加值（例如，内联时，样式表适用于整个文档，您必须确保 ids 在整个文档中都是唯一的）。
@Kaiido 更新了答案，删除了type 是强制性的，以及内联<svg..> 示例中的xmlns。感谢您指出！阐明了为什么我认为内联 svg 是最强大的选项。
我仍然不同意“迄今为止最强大的一个”：如果从同一个域提供服务，您只需从主文档的 js 访问它几乎 i> 就像在主文档中一样容易，但这变成了意见，主要问题是 <img> 带来的限制，你仍然得到我的支持。
我明白你的意思，这是固执己见，所以从答案中删除。
感谢@Rogier，我按照您的建议将 img 标签替换为 object 标签，问题很快解决，样式可以应用于我的对象。真的很感激。