拉斐爾和preserveAspectRatio

隨着RaphaelJS，這個命令插入一張圖片： -拉斐爾和preserveAspectRatio

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不支持preserveAspectRatio with SVG images。使用FF或IE進行測試。

2013-04-30 Alvin K.

看起來像PAR在Chrome的bug =無在SVG圖像固定在大約一年前，它應該在Chrome 28和更高版本。 – 2014-05-05 16:09:31

在源代碼級，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。

拉斐爾的文檔爲Element.node「帶給你的DOM對象的引用，這樣你就可以左右分配事件處理程序，或只是亂七八糟的注意：不要惹它」

2013-05-01 05:14:59

我敢肯定的jQuery中設置'preserveAspectRatio'不會工作因爲jQuery decapitalizes它們插入到DOM和SVG，是嚴格的XML之前屬性的名稱，是區分大小寫的。他將需要直接使用本地DOM方法 – 2013-05-02 02:29:44

你是對的，更新jQuery答案。另一種方法是編輯（在4個地方）raphael.js接受preserveAspectRatio。 – 2013-05-02 03:31:49

回答