从外部更改svg选项
Change svg options externally
我有大约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
,并且内容将从浏览器的缓存中读取。
相关文章:
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何更改<svg>标记为<img>用js标记
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- 如何在选项卡上定义属性'的主窗口对象
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 使用此选项选择父类内部的类
- 是否可以使用 Javascript 库测试 SVG 元素?任何其他选项
- 选择选项并更改适当的对象svg
- 从外部更改svg选项
- 流动虚线(svg路径动画)的最佳选项
- 基于SVG的UI是可用的和/或可行的选项吗
- Kendo UI选项卡-Javascript-当内容是SVG时,会附加选项卡