SVG foreignObject ведет себя так, как будто абсолютно позиционируется в браузерах Webkit - PullRequest
Новая
       9

SVG foreignObject ведет себя так, как будто абсолютно позиционируется в браузерах Webkit

18 голосов
/ 18 ноября 2011

Я работаю с SVG в документе HTML. По какой-то причине в Chrome любое содержимое любого элемента <foreignObject> отображается в верхнем левом углу родительского элемента элемента <svg>; как будто элемент <foreignObject> был абсолютно позиционирован или что-то еще У меня нет этой проблемы в Firefox.

Что может быть причиной этого? Как я могу это исправить?

Вот мой тестовый пример: ( пример также на JsFiddle ) 

<!DOCTYPE html>
<html>
<head>
<title>SVG bug in Chrome?</title>
<style type="text/css">
code {
    background: #FFFAEE;
}
pre code {
    display:block;
}
.widget-body {
    background:yellow;
    position: relative; /* This is the problem! */
}
</style>
<body>
<h1>SVG bug in Chrome?</h1>
<div>
    <p>
        The elemts in the &lt;foreignObject&gt; are not positioned properly unless the <code>.widget-body</code> rule is changed to:
                <pre><code>.widget-body {
    background:yellow;
/*  position: relative; /* This is the problem! */
    position: static;
}

Пример:

Заголовок моего виджета
Эта позиция этого желтого квадрата
должна приблизительно (100, 200)
Этот красный квадрат должен находиться
в правом нижнем углу
желтого квадрата.

То, что я ожидаю увидеть (что я вижу в FireFox), это:

The behavior of my example in FireFox

Что я получаю в Chrome (15.0.874.121 на Fedora и на планшете Android):

The behavior of my example in Chrome. The contents of the foreignObject are not in the right place.

У меня минимальный контроль над содержимым HTML, так как я использую JavaScript Framework для многофункциональных приложений и уже существующих виджетов.

Ответы [ 2 ]

21 голосов
/ 02 декабря 2011

Эта проблема не относится к Chrome, поскольку я мог воспроизвести ее в Chrome 15.0.874.121 для Macintosh, а также в Safari 5.1.2. (Это также происходило в более старых версиях Firefox для Mac, таких как версия 3.6.8, но поведение в текущей версии правильное.) Эта существующая в настоящее время ошибка Webkit , вероятно, является причиной проблемы. , Глобальные координаты неправильно используются для элементов в foreignObject, что означает, что при использовании абсолютного позиционирования эти элементы размещаются относительно основного потока документов, а не контейнера foreignObject, и, следовательно, перевод SVG не применяется к этим элементам.

Мне не удалось найти общее решение этой проблемы.

В этом конкретном примере это исправит макет во всех вышеупомянутых браузерах: 

.widget {
    position: relative;
    left: 100px;
    top: 200px;
}

Демонстрация на jsfiddle.

8 голосов
/ 08 июля 2015

position: fixed; решил проблему для меня.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...