Я использую Raphaeljs для создания приложения, позволяющего людям настраивать двери.Я в основном разделяю секции двери и использую Raphaeljs, чтобы нарисовать их путем, затем заполняю этот путь соответствующим изображением.
Это мой код, который рисует дверь.
function drawDoor(style, color){
door = paper.path(door_paths[style].path).translate(105, 93);
door.attr({ fill: "url(images/door/"+style+"/"+style+"_"+color+".png)", stroke: 0 });
door.node.setAttribute("class","door");
door.click(element_click);
}
Это прекрасно работает во всех браузерах, кроме Safari.Кажется, что путь хорошо прорисован, но когда вы прокручиваете страницу, изображение прокручивается, как будто оно прикреплено к фону, путь действует как маска.
Я записал небольшое видео, чтобы продемонстрировать это,Вы можете увидеть это на vimeo здесь http://vimeo.com/24539065
Это происходит как с pngs, так и с jpg, и я попытался удалить свой перевод из функции рисования, но безуспешно.Я также исключил проблемы css, удалив мою таблицу стилей.
Любые предложения будут оценены, спасибо.