从外部更改 svg 选项

Question

我有大约 100 个 svg 文件，而且我想更改相同的内容。这是原文：

<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="460px" height="104px" viewBox="0 0 460 104" enable-background="new 0 0 460 104" xml:space="preserve">

我想这样改变它：

<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     preserveAspectRatio="xMinYMin meet" viewBox="0 0 460 104" enable-background="new 0 0 460 104" xml:space="preserve">

我的html代码是：

<div id="main"><object width="100%" data="http://euclidthegame.com/mathexchange/7.svg" type="image/svg+xml"></object></div>

所以我想将高度和宽度设置为默认值，并且我想添加 preserveAspectRatio="xMinYMin meet" 。当然，我可以只编辑所有文件，但我想在外部使用 javascript、jquery 或 css 来执行此操作。我不确定如何更改外部 svg 中的属性。

这是我尝试过的：http://jsfiddle.net/kasper90/vV7Y8/

Answer 1

可能的解决方案：为避免编辑 100 个 svg 文件，请将其转换为 inline <svg>，将 code is found in my answer 转换为这个 SO 问题。

并调整代码以插入 preserveAspectRatio：-

$aspectRatio = "xMinYMin meet";
$svg = $svg.attr('preserveAspectRatio', $aspectRatio);

速度：由于 <svg> 图像已经加载，$.get() 将导致 HTTP Error 304 - Not modified 并且将从浏览器的缓存中读取内容。