如何通过CSS操作存储在其他目录的SVG文件？

SVG能否被操作、能否实现transform效果，和SVG存储的目录没有直接关系，只和你引入SVG的方式有关。如果是用<img>标签引入，浏览器会将其作为普通图片处理，无法访问内部DOM节点，只能对整个img元素添加变换效果，无法操作内部子元素。

场景1：仅需要对整个SVG做transform变换 #

直接给引入SVG的外层元素加CSS样式即可，只要SVG路径正确、能正常加载就可以生效，路径写法和引用普通静态资源完全一致，以HTML文件所在路径为基准：
示例代码：

<!-- 假设HTML在根目录，SVG存放在assets/svg目录下 -->
<img id="svg-img" src="./assets/svg/demo.svg" alt="示例SVG">

#svg-img {
  transform: rotate(45deg) scale(1.2);
  /* 可加过渡效果 */
  transition: transform .3s ease;
}

场景2：需要操作SVG内部的单个元素做变换 #

需要改用支持访问SVG内部DOM的引入方式，可选方案如下：

方案1：用object标签引入 #

可直接访问SVG内部文档结构，是最常用的外部SVG操作方案：

<object id="external-svg" type="image/svg+xml" data="./assets/svg/demo.svg"></object>

const svgObj = document.getElementById('external-svg');
// 等待SVG加载完成后再操作
svgObj.addEventListener('load', () => {
  // 获取SVG内部文档对象
  const svgDoc = svgObj.contentDocument;
  // 选中SVG内部需要操作的元素
  const targetPath = svgDoc.querySelector('#target-element-id');
  // 添加transform变换
  targetPath.style.transform = 'translateX(20px) skew(10deg)';
});

方案2：内联SVG代码 #

如果SVG文件体积较小，直接复制SVG源码插入到HTML中即可，无需关注原文件存储目录，可直接操作内部元素：

<div id="svg-container">
  <!-- 直接粘贴SVG源码 -->
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path id="target" d="M10 10h80v80H10z" fill="#2563eb"/>
  </svg>
</div>

// 直接选中内部元素操作
document.querySelector('#target').style.transform = 'rotate(90deg)';

方案3：fetch动态加载插入 #

// 按实际路径填写SVG地址
fetch('./assets/svg/demo.svg')
  .then(res => res.text())
  .then(svgCode => {
    document.getElementById('svg-container').innerHTML = svgCode;
    // 加载完成后直接操作
    document.querySelector('#target').style.transform = 'scale(1.5)';
  });

参考截图 #

项目目录结构：

SVG引入代码：

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