Холст Рафаэля переопределяет css

Я использую Raphael для создания векторной карты. Карта большая, поэтому я использую RaphaelZPD, чтобы можно было масштабировать и панорамировать, помещая изображение в меньший кадр. Я использовал html5 для создания набора div в виде ячейки таблицы с закругленными углами и некоторыми вставками-тенями, установленными в файле css. Я идентифицировал свой холст Рафаэля так же, как и div, и хотя он хорошо загружается, правильно отображает всю графику, все анимированные элементы работают правильно, остаются в границах и т. д., все еще есть небольшая проблема. SVG переопределяет атрибуты закругленного угла и вставки box-shadow, установленные в css. Таким образом, вместо закругленных углов я получаю острые углы. Если я перемещаю карту так, чтобы на угол не накладывалась графика, созданная Рафаэлем, снова появляется закругленный угол. То же самое касается теней.

Итак, есть ли способ заставить js оставаться за этими эффектами? Или я должен попытаться обойти это, создав перевернутые закругленные углы как абсолютные элементы, которые останутся на верхнем слое и просто забудут о тенях?

Я надеюсь, что я ясно понял свою проблему, получил хорошую неделю опыта программирования любого рода, поэтому моя терминология все еще немного шатается.

http://jsfiddle.net/cgnrh/4/ ‹ — с тренировочными изображениями, тоже очень беспорядочно

#map {
  display: table-cell;
  position: absolute;
  margin-top: 104px;
  margin-left: 350px;
  border-radius: 0 2em 2em 0;
  box-shadow: inset 3px 0 7px #777;
  width: 550px;
  height: 900px;
  background: #FFFFFF;
}

var paper = Raphael('map');

javascript html css raphael
person kile    schedule 09.06.2011    source источник
comment
Вероятно, потребуется увидеть вашу разметку и css, чтобы иметь возможность устранять неполадки. Я могу добавить свойства css3 в div, который я определяю для своего холста Raphael и рисую.   -  person kinakuta    schedule 09.06.2011
comment
#карта { отображение: таблица-ячейка; положение: абсолютное; поле сверху: 104px; поле слева: 350px; радиус границы: 0 2em 2em 0; box-shadow: вставка 3px 0 7px #777; ширина: 550 пикселей; высота: 900 пикселей; фон: #FFFFFF; } а для Рафаэля просто var paper = Raphael('map');   -  person kile    schedule 09.06.2011
comment
У вас есть где-нибудь ваша карта, ее можно посмотреть? Я не думаю, что смогу воссоздать проблему, не видя, что вы на самом деле пытаетесь сделать. Простого определения объекта Raphael в div недостаточно, чтобы эффекты CSS3 исчезли.   -  person kinakuta    schedule 09.06.2011
comment
Хорошо, это будет некрасиво, но, пожалуйста, простите меня, я только учусь здесь, так что это очень грязно, и графика, которую я нарисовал, просто для практики, а не на самом деле. В любом случае здесь идет jsfiddle.net/cgnrh/2, также я не мог заставить RaphaelZPD работать, даже если я по какой-то причине добавил его в html как внешний скрипт. Вы можете получить его здесь, хотя github.com/somnidea/raphael-zpd   -  person kile    schedule 09.06.2011

Ответы (1)


arrow_upward
3
arrow_downward

Я обернул div вокруг вашего div карты:

<div id="frame">
  <div id="map">
  </div>
</div>

Затем я изменил положение с абсолютного на относительное на #map и добавил стили для фрейма:

#frame {
  position: relative;
  top: 104px;
  left: 350px;
  overflow:hidden;
  border-radius: 0 2em 2em 0;
}

Применяя закругленный угол к обертывающему div и скрывая переполнение, он создает закругленный угол на изображении карты. Я считаю, что ваше предположение верно, что Raphael SVG отображает эффекты div, на котором он рисует, поэтому вам просто нужно ограничить его окружающим div. Изменение положения с абсолютного на относительное и использование позиционирования в обертывающем div было необходимо, чтобы получить его макет в том же месте, что и раньше. Я не думаю, что вы сможете добиться тени вставки.

http://jsfiddle.net/9w2ub/

person kinakuta    schedule 09.06.2011
comment
Хорошо, я понимаю, к чему вы клоните, хотя по какой-то причине теперь я вижу результат без закругленных углов? Я понимаю, что мои таблицы очень запутаны с абсолютными позициями, и я все еще ищу окончательный макет, но с помощью этого метода я верю, что смогу заставить его работать в конце. Спасибо за помощь! - person kile; 09.06.2011
comment
Если вы прокрутите до упора вправо, вы не увидите закругленный угол? В каком браузере вы его просматриваете? - person kinakuta; 09.06.2011
comment
Ну, что интересно, я вижу закругленный угол в FF4, но не вижу Chrome, даже когда я добавил префиксы поставщиков к стилю радиуса границы. Иди разберись. - person kinakuta; 09.06.2011