拉斐尔和保留纵横比答案

【问题标题】：Raphael and preserveAspectRatio拉斐尔和保留纵横比
【发布时间】：2013-04-30 20:59:25
【问题描述】：

使用 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 标签。因此我无法在父

上设置此属性

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

【问题讨论】：

标签： svg raphael

【解决方案1】：

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

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

myImg[0].preserveAspectRatio.baseVal.align = 6 （1 = 关闭，6 = xMidYMid） myImg[0].preserveAspectRatio.baseVal.meetOrSlice = 1 （1 = 相遇，2 = 切片）

更新：- jQuery 样式：-

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

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

【讨论】：

我很确定 jQuery 在设置 preserveAspectRatio 时不会起作用，因为 jQuery 在将属性名称插入 DOM 之前会将它们取消大写，而 SVG 作为严格的 XML 是区分大小写的。他将需要直接使用原生 DOM 方法
你是对的，更新 jQuery 答案。另一种选择是编辑（在 4 个位置）raphael.js 以接受 preserveAspectRatio。

【解决方案2】：

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

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

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

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

【讨论】：