Я пытался отобразить текст, заполненный шаблоном, но не могу найти способ избежать странного поведения с отображением моего шаблона.SVG viewBox, влияющий на заполнение текстовых элементов
Вот пример кода задачи: http://jsfiddle.net/queZM/
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 500 310">
<defs>
<linearGradient id = "bgrad" x1 = "0%" y1 = "100%" x2 = "100%" y2 = "0%">
<stop stop-color = "purple" offset = "0%"/>
<stop stop-color = "green" offset = "100%"/>
</linearGradient>
<pattern id="bg" x="0" y="0" height="1" width="1" patternContentUnits="objectBoundingBox">
<rect x="0" y="0" width="1" height="1" fill="url(#bgrad)"/>
</pattern>
</defs>
<text dx="0" dy="0" font-size="45" font-weight="bold" fill="url(#bg)">Hello World</text>
</svg>
Как вы можете видеть (если нет, то размер нижней левой части, где отображается результат), градиент отображается со смещением. Это смещение изменяется в зависимости от масштаба изображения. Я действительно не понимаю.
Если я удалю часть viewBox в теге svg, все будет хорошо (за исключением того, что я застрял в этом огромном изображении, которое не будет закреплено в его конечном контейнере HTML с динамическим размером).
Если я использую прямоугольник вместо текста, это кажется прекрасным.
Если текст 0,0 офсета, это нормально ...
Но я хотел бы иметь смещение для текста, Viewbox, чтобы иметь возможность наполнить свой образ SVG как вставлять HTML-элемент. Я действительно не понимаю!
Если у вас есть ключ, было бы очень полезно! Thanks
PS: Я знаю, что могу использовать градиентную заливку, но мне действительно нужно использовать материал шаблона. В примере, чтобы максимально упростить вещи, я использую только градиент, но в конце это будет градиент, наложенный на другое изображение.
Не уверен, что я вижу. Вы пробовали разные UA? например Opera или Firefox? –
@RobertLongson О, простите! Проблема возникает с Chrome. После прочтения вашего комментария, который я тестировал с помощью Firefox, нет такой проблемы! Возможно, проблема только в Chrome (или webkit?). Я попробую с другими браузерами как можно скорее. Я не уверен, что вы имеете в виду, пытаясь использовать разные UA. Я пробовал использовать разные шаблоны, шаблоны и элементы градиента. Я попытался использовать% и ряд строк. Спасибо за ваш комментарий! – Michel
UA = пользовательский агент, например. браузера или чего-то другого, такого как Батик. Похоже, вы нашли ошибку Chrome или webkit, о которой вы должны сообщить. –