SVG外部样式表失效：无法为Cube对象设置样式

嘿，我看到你遇到的问题了——用外部样式表给SVG里的Cube设置样式没生效，核心原因在于你用<img>标签引入SVG的方式，咱们一步步来解决：

为什么原来的方法不生效？ #

当你用<img>加载SVG时，这个SVG会被当作一个独立的图像资源，它的内部元素处于一个封闭的文档环境里，不管是HTML里的<link>样式表，还是SVG自身引用的cube.css，都没办法穿透<img>的上下文去样式化SVG内部的元素。这是浏览器的安全机制导致的。

解决方案1：将SVG内联到HTML中 #

把SVG代码直接放到HTML里，这样外部样式表就能直接作用于SVG的类和元素了，修改后的index.html如下：

<head>
  <link rel="stylesheet" type="text/css" href="cube.css">
</head>
<body>
  <!-- 直接内联SVG代码 -->
  <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" height="350px">
    <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>
  <div class="logo">
    <h1>SVG Cube Animation</h1>
  </div>
</body>

这种方法的好处是样式表可以直接复用，而且SVG元素的样式和动画都能正常工作。

解决方案2：用<object>标签代替<img> #

如果你不想内联SVG，也可以用<object>标签来加载它，这样SVG自身引用的外部样式表（cube.css）就能正常生效了，修改后的index.html：

<head>
  <!-- 这里可以保留HTML的样式表，用来给logo等元素设置样式 -->
  <link rel="stylesheet" type="text/css" href="cube.css">
</head>
<body>
  <object data="cube-motion.svg" type="image/svg+xml" height="350px"></object>
  <div class="logo">
    <h1>SVG Cube Animation</h1>
  </div>
</body>

同时要确保cube-motion.svg里的样式表引用路径是正确的（如果和SVG在同一目录下，当前的href="cube.css"就没问题）。

额外注意点 #

• 如果你用<object>的方式，想要从HTML的样式表直接控制SVG内部元素，需要在SVG里添加一个<style>标签导入HTML的样式表，或者用JavaScript来操作，但内联的方式会更简单直接。
• 检查你的cube.css里的.logo样式，left: 400和top: 150最好加上单位，比如px，不然浏览器可能不会正确解析：

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

这样调整后，你的Cube元素应该就能正常显示样式和动画啦！

内容的提问来源于stack exchange，提问作者Thein Htut