拉斐爾和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標籤。因此，我無法在父級上設置此屬性<svg>

注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 =滿足，2 =切片）

更新： - jQuery的樣式： -

的jQuery（myImg.node）.prop（ 'preserveAspectRatio'）baseVal.align = 6; jQuery的（myImg.node）.prop（ 'preserveAspectRatio'）baseVal.meetOrSlice = 1。

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