JS开发：如何获取用户上传SVG文件的未取整宽度值

直接用<img>加载SVG会丢失原始的非整数尺寸属性，因为浏览器会将其按位图规则处理并取整。你可以通过以下两种方式获取原始值：

方法1：通过FileReader读取SVG文本并解析 #

• 用户选择文件后，用FileReader读取文件的文本内容
• 借助DOMParser将文本转为DOM对象，直接提取原始属性值

示例代码：

// 绑定文件选择器的change事件
document.querySelector('input[type="file"]').addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile || !selectedFile.type.includes('svg')) return;

  const reader = new FileReader();
  reader.onload = (event) => {
    const svgContent = event.target.result;
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml');
    const svgElement = svgDoc.querySelector('svg');
    
    // 获取未取整的原始属性值
    const rawWidth = svgElement.getAttribute('width');
    const rawHeight = svgElement.getAttribute('height');
    
    console.log('原始宽度:', rawWidth);
    console.log('原始高度:', rawHeight);
  };
  reader.readAsText(selectedFile);
});

方法2：通过Object URL加载SVG到object元素 #

• 创建<object>元素，用URL.createObjectURL(file)作为资源地址
• 加载完成后访问其内容文档中的SVG元素，提取原始属性

示例代码：

document.querySelector('input[type="file"]').addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile || !selectedFile.type.includes('svg')) return;

  const svgObject = document.createElement('object');
  svgObject.data = URL.createObjectURL(selectedFile);
  svgObject.style.display = 'none';
  
  svgObject.onload = () => {
    const svgElement = svgObject.contentDocument.querySelector('svg');
    const rawWidth = svgElement.getAttribute('width');
    const rawHeight = svgElement.getAttribute('height');
    
    console.log('原始宽度:', rawWidth);
    console.log('原始高度:', rawHeight);
    
    // 清理临时URL并移除元素
    URL.revokeObjectURL(svgObject.data);
    document.body.removeChild(svgObject);
  };
  
  document.body.appendChild(svgObject);
});

注意：本地文件选择场景下无跨域问题，获取到的属性值为字符串格式，如需数值可自行转换。

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