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，并且会从浏览器的缓存中读取内容。

从外部更改svg选项

1 个答案: