Рафаэль холст переопределяет CSS - PullRequest
Новая
       10

Рафаэль холст переопределяет CSS

4 голосов
/ 09 июня 2011

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

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

Надеюсь, я справился со своей проблемой, получил хорошую неделю программированияопыт какой-то такой немного шаткий с моей терминологией.

http://jsfiddle.net/cgnrh/4/ <- с практическими изображениями, тоже очень грязный </p> 

#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');

1 Ответ

3 голосов
/ 09 июня 2011

Я обернул 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.Изменение положения с абсолютного на относительное и использование позиционирования на оберточном элементе было необходимо, чтобы переместить его в макет в том же месте, где он был раньше.Я не думаю, что вы сможете добиться тени от вставки.

http://jsfiddle.net/9w2ub/

...