Расположение элементов SVG с помощью CSS

Question

Расположение элементов SVG с помощью CSS

Примите следующий svg документ:

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="20">My text</text>
</svg>

Теперь то, что я хочу сделать, изменить местоположение этого текста с помощью css.

Я попытался добавить style="dx:20" и style="transform: translate(20)". Оба не имеют никакого эффекта в Firefox и сафари. Добавление их как нормальные атрибуты хорошо работает, но тогда я не могу разделить расположение от фактического кода. Установка x, y, left и top в стиле не работает также.

Существует ли способ расположить svg элемент с помощью css?

38

css svg

задан Yorick Sijsling 4 February 2010 в 09:14

2 ответа

Другие вопросы по тегам:

css svg

Похожие вопросы:

score 6 · Answer 1

На данный момент, похоже, - согласно Шелли Пауэрс , в ее Списке отдельных статей « Использование SVG для гибкого, масштабируемого и веселого фона: часть I » и « часть II » - что CSS в настоящее время не На самом деле, кажется, что это вполне минное поле для включения SVG в web-страницу, не встраивая его непосредственно в сам html.

Я надеюсь, что будут найдены решения, и, действительно, Пауэрс предлагает пару обходных путей, чтобы обеспечить надлежащее разделение стиля и содержания для SVG. Я бы рисковал догадкой о том, что текущие проблемы - это относительная новизна концепции/стандарта (относительно, например, .gif или даже .png ...), к сожалению.

Извините, что не могу предложить лучший ответ. =/

score -2 · Answer 2

Предупреждаю, что я относительный новичок, но как насчет «x» и «y» и присвоения им числа и «px»

, может быть:

left: 290px;    top: 1200px;

или

x:30px; y:50px;

и

text-anchor:start;

Пример:

<text
       xml:space="preserve"
       style="font-size:32;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Comic Sans MS;-inkscape-font-specification:Comic Sans MS Bold"
       x="131.42857"
       y="269.50504"
       id="text2383"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan2385"
         x="131.42857"
         y="269.50504">Position ze text</tspan></text>