svg - 拉斐尔和保留纵横比

Question

使用 RaphaelJS，此命令插入图像：-

var myImg = paper.image('image.svg', 100, 100, 150,150);

SVG输出是：-

<image x="100" y="100" width="150" height="150" preserveAspectRatio="none" href="image.svg"/>

问题：我如何直接访问preserveAspectRatio属性并将其更改为xMidYMid meet- 如果您检查myImg.attr()，它不会显示此属性。

迂回的方式是导航 SVG DOM 树，然后执行svgImg.setAttributeNS(null,"preserveAspectRatio" , "xMidYMid meet" );

注意：只有一些图像需要none，而其余的需要xMidYMid meet标签。因此我无法在父 <svg> 上设置此属性

注意 2：Chrome 不支持SVG 图像的 preserveAspectRatio。使用FF或IE进行测试。

score 1 · Accepted Answer

在源代码级别，preserveAspectRatio硬编码为none

回答最快的方法来改变这个：-;

myImg[0].preserveAspectRatio.baseVal.align = 6 (1 = off, 6 = xMidYMid) myImg[0].preserveAspectRatio.baseVal.meetOrSlice = 1 (1 = meet, 2 = slice)

更新：- jQuery 风格：-

jQuery(myImg.node).prop('preserveAspectRatio').baseVal.align = 6 ; jQuery(myImg.node).prop('preserveAspectRatio').baseVal.meetOrSlice = 1 ;

Raphael 的文档Element.node “为您提供对 DOM 对象的引用，因此您可以分配事件处理程序或只是乱来。注意：不要乱来。”

score 0 · Accepted Answer

您可以在整个 Raphael 画布上调用这些参数。

首先创建 SVG： var paper = Raphael('content',xSize,ySize);

将图像放入其中： paper.image('image.svg', 100, 100, 150,150);

然后改变svg的属性：paper.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet');

2 回答 2