Установите значение X и Y для элемента g SVG
Я относительно новичок в рисовании SVG с HTML5.
Что я хочу сделать, так это создать группу элементов в SVG с элемент g, чтобы все элементы внутри этого элемента
Итак, я сделал что-то вроде этого -
<svg width = "500" height = "300" xmlns = "http://www.w3.org/2000/svg">
<g x = "1000" y = "1000">
<title>SVG Title Demo example</title>
<rect width = "200" height = "50"
style = "fill:wheat; stroke:blue; stroke-width:1px"/>
<text style = "text-anchor: middle;" class = "small">My Text</text>
</g>
</svg>Я ожидал, что все элементы внутри элемента g получат x = "1000" и y = "1000", поэтому мой ожидаемый результат будет таким:
Но я получаю это-
Повторно
Мне не нравится устанавливать элементы x и y в элементе text. Я просто хочу установить относительные x и y в элементе text, если это необходимо, но это должно быть относительно элемента g.
Может ли кто-нибудь помочь мне в том, что мне нужно сделать для достижения моей цели с группой в SVG?
Я использую SVG, а не Canvas
Это тоже было полезно! stackoverflow.com/questions/479591/svg-position
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Элементы <g> не поддерживают атрибуты x или y. Однако вместо этого вы можете использовать преобразование.
Я уменьшил значения с 1000 до 100, иначе результат будет за пределами холста 500 x 300 внешнего элемента <svg>.
Я предоставил дополнительные атрибуты x и y для текстового элемента, чтобы он выглядел так, как в вашем примере. При желании вы можете поместить сам текст в элемент <g> или элемент <svg>.
<svg width = "500" height = "300" xmlns = "http://www.w3.org/2000/svg">
<g transform = "translate(100, 100)">
<title>SVG Title Demo example</title>
<rect width = "200" height = "50"
style = "fill:wheat; stroke:blue; stroke-width:1px"/>
<text x = "100" y = "30" style = "text-anchor: middle;" class = "small">My Text</text>
</g>
</svg>или использование дополнительного элемента <g>, чтобы исключить x и y в самом тексте.
<svg width = "500" height = "300" xmlns = "http://www.w3.org/2000/svg">
<g transform = "translate(100, 100)">
<title>SVG Title Demo example</title>
<rect width = "200" height = "50"
style = "fill:wheat; stroke:blue; stroke-width:1px"/>
<g transform = "translate(100, 30)">
<text style = "text-anchor: middle;" class = "small">My Text</text>
</g>
</g>
</svg>В качестве альтернативы вы можете использовать внутренний элемент <svg> вместо элемента <g>, поскольку он поддерживает атрибуты x и y.
<svg width = "500" height = "300" xmlns = "http://www.w3.org/2000/svg">
<svg x = "100" y = "100">
<title>SVG Title Demo example</title>
<rect width = "200" height = "50"
style = "fill:wheat; stroke:blue; stroke-width:1px"/>
<text x = "100" y = "30" style = "text-anchor: middle;" class = "small">My Text</text>
</svg>
</svg>Не могли бы вы добавить некоторые относительные достоинства и соображения по каждому из них? Когда уместно вкладывать SVG? Есть ли недостатки в производительности? Как насчет использования преобразования по сравнению с собственными атрибутами x и y?
Я бы не использовал ни один из них, вместо этого я бы установил атрибуты x и y в текстовом элементе. ОП по какой-то непостижимой причине не хочет делать что-то легким путем. Производительность зависит от браузеров, платформ и видеокарт.
У меня довольно сложная установка, в которой у меня есть вложенный выбор. Представьте себе таблицу со строками и ячейками внутри строк. Иногда мне нужно изменить порядок строк и изменить координату y элемента строки. У меня была строка как <g>, но теперь это <svg>, и поведение работает, но это не очень красиво. Учитывая мою структуру данных, было бы очень сложно обновить координаты y для каждого из элементов отдельно, и было бы неплохо, если бы я мог сделать это в строке ...
Вероятно, вам следует задать отдельный вопрос, хотя вам нужно будет четко определить, что означает «некрасиво». Может быть, один из моих ответов для вас, попробуйте и убедитесь.
Вы конкретно хотите использовать svg или просто хотите нарисовать поле в html5, у которого есть собственные инструменты рисования (холст)