Позиционирование элементов SVG с использованием CSS

Ответ 1

Мне удалось переместить некоторый текст SVG в chrome, используя следующий CSS:

text.identity{
transform: translate(74px,0px);
-ms-transform: translate(74px,0px); /* IE 9 */
-webkit-transform: translate(74px,0px); /* Safari and Chrome */
-o-transform: translate(74px,0px); /* Opera */
-moz-transform: translate(74px,0px); /* Firefox */
}

Однако, он не сдвинется с места в Firefox...

Ответ 2

Вот хакерская возможность позиционировать специфически текстовые элементы исключительно с помощью CSS, злоупотребляя атрибутами 'межстрочный интервал для x-координаты и 'базовый сдвиг для y-координаты:

<defs>
    <font><font-face font-family="cssPosAnchor" />
        <glyph unicode="." horiz-adv-x="0" />
    </font>
    <style type="text/css"><![CDATA[
#cssPos {
    font-family:cssPosAnchor;
    letter-spacing:10px; /* x-coordinate */
}
#cssPos>tspan {
    font-family:serif;
    letter-spacing:normal;
    baseline-shift:-30px; /* negative y-coordinate */
}
]]>
    </style>
</defs>
<text id="cssPos">.<tspan>CSS-Positioned Text!</tspan></text>

'базовый сдвиг применим только к элементам ' tspan, что делает внутренний <tspan> необходимым в представленном коде. Положительные значения для базового сдвига перемещают текст вверх, противоположный нормальному направлению в svg.

'расстояние между буквами требует наличия начальной буквы, что делает необходимым .. Чтобы исключить ширину этой первой буквы, мы используем специальный шрифт cssPosAnchor, где точка не имеет ширины и формы. Следующий <tspan> дополнительно восстанавливает шрифт и буквенный интервал.

Масштаб

Должен работать в каждой соответствующей реализации SVG.

Существует одно неопределенное ограничение, хотя для отрицательных x-координат. Спецификация для атрибута "letter-spacing" говорит: "Значения могут быть отрицательными, но могут быть ограничения, специфичные для реализации".

Совместимость

Текст 'направление изменится очень хорошо, если наложить на внутренний <tspan>.

На внешний <text> должен быть наложен нестандартный 'режим записи. Там, безусловно, будут проблемы с этим.

Возможно, более важные "текстовые привязки значения средний и конец можно сделать следующим образом:

<defs>
    <font><font-face font-family="cssPosAnchor" />
        <glyph unicode="." horiz-adv-x="0" />
        <glyph unicode=" " horiz-adv-x="0" />
    </font>
    <style type="text/css"><![CDATA[
#cssPos {
    font-family:cssPosAnchor;
    letter-spacing:100px; /* x-coordinate */
    word-spacing:-200px; /* negative double x-coordinate */
}
#cssPos>tspan {
    font-family:serif;
    word-spacing:normal;
    letter-spacing:normal;
    baseline-shift:-30px; /* negative y-coordinate */
}
#cssPos {
    text-anchor=middle;
}
]]>
    </style>
</defs>
<text id="cssPos">.<tspan>CSS-Positioned Text!</tspan> .</text>

‹space›. перед закрывающим тегом <\text> создает интервал, равный минус x-координате. Таким образом, внутренний <tspan> перемещается, но сохраняет его в <text> как будто он все еще там.

Поскольку для атрибутов интервала могут быть ограничения, специфичные для реализации, это не гарантируется для всех клиентов!

Ответ 3

Я пришел сюда искать исправление, но сам исправил проблему, подумал, что буду делиться:

transform: translate(100px, 100px)

Появляется, чтобы работать во всех современных браузерах, кроме Internet Explorer, вплоть до Microsoft Edge (который еще не выпущен), что весьма неутешительно. Элементы, которые я тестировал:

<path>
<polygon>
<g>

Единственная проблема, с которой я столкнулся, - это элементы <text>, а решение - обернуть <text> в <g> и применить к этому преобразование. Это также должно работать для любых элементов, которые я еще не тестировал, которые имеют проблемы с transform: translate().

Я не нашел достойного резерва для Internet Explorer, вместо этого я убедился, что преобразования не являются жизненно важными для функции SVG.

Ответ 4

На данный момент, похоже, Shelley Powers, в ее A List Apart Article "Использование SVG для гибких, масштабируемых и интересных фонов: Часть I "и " Part II" - что CSS в настоящее время не подходит для позиционирования SVG. На самом деле, похоже, это очень минное поле для включения SVG в веб-страницу без непосредственного встраивания его в сам html.

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

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

Ответ 5

polygon r = "7" id = "map_points_55" points = "23,10 15,27 34,16 10,16 31,27" style = "fill: lime; stroke: purple; stroke-width: 0; заполнить правило: от нуля";

если вы хотите переместить звезду, затем добавьте 10 или более очков в точках, таких как точки = "33,20 25,37 44,26 20,26 41,37"

Ответ 6

Использовать позиционирование css:

index.html

<link href="style.css" rel="stylesheet" />
<div class="parent">
  <div class="child">
    <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>
  </div>
</div>

style.css

.parent {
  position: relative;
  height: 1000; /* bigger than your svg */
  width: 1000; /* bigger than your svg */
}

.child {
  position: absolute;
  top: 10px;  /* relative to parent container */
  left: 10px; /* relative to parent container */
}

Ответ 7

Я предупреждаю вас, что я относительный новичок, но как насчет "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>