从外部更改svg选项

Change svg options externally

本文关键字：选项 svg 从外部      更新时间：2023-09-26

我有大约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/

可能的解决方案：为了避免编辑100个svg文件，将其转换为inline <svg>，代码在我对这个SO问题的回答中找到。

并调整代码以插入preserveAspectRatio:-

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

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

相关文章：