내가하려는 것은 Kinetic.js 이미지를 사용하여 캔버스에 일부 svg 이미지를 그리는 것입니다. 그래서 어도비 일러스트 레이터에서 svg로 많은 것들을 내보냈습니다. 모든 iOS 7.1 Safari를 열고 50에서 2 개의 이미지 만 그리기 전에 모든 브라우저에서 테스트 해 보았습니다. 말하기에 이상한 점은 Safari에서 직접 svg를 열면 제대로 작동하지만, 캔버스에 그려 넣으려고하면 그 중 일부만 나타납니다. 여기 대부분의 Kinetic.JS SVG 이미지가 Safari에 표시되지 않습니다.
두 이미지 예입니다 - 그 중 하나가 다른조차 나타나지 않는 경우 Safari에서 잘 작동 :http://jsbin.com/fitefiya/4/edit
var imgObj = new Image();
imgObj.onload = function(){
var testPicture = new Kinetic.Image({
x: 100,
y: 100,
width: imgObj.width,
height: imgObj.height,
image: imgObj
});
testLayer.add(testPicture);
testLayer.draw();
console.log('image was loaded');
};
//this don't work only on iPad Safari, but works well in any other browser
imgObj.src = 'https://dl.dropboxusercontent.com/s/42i35ug37uiwg6d/titleBooks.svg';
//this svg work well even on Safari
//imgObj.src = 'https://dl.dropboxusercontent.com/s/1q7cduvxdktvcbg/titleStartButton.svg';