拉斐尔和preserveAspectRatio

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标记。因此，我无法在父＆lt; svg＆gt;

上设置此属性

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

Answer 1

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

回答最快捷的方式： - ;

  

myImg [0] .preserveAspectRatio.baseVal.align = 6（1 =关闭，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对象的引用，所以你可以分配事件处理程序或者只是乱七八糟。注意：不要乱用它。” < / p>

Answer 2

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

首先创建SVG： var paper = Raphael（'content'，xSize，ySize）;

在其中放置图片： paper.image（'image.svg'，100，100，150,150）;

然后更改svg的属性： paper.canvas.setAttribute（'preserveAspectRatio'，'xMidYMid Meet'）;