0

введите сюда описание изображения Что у меня не так?) хочу центрировать текст по группе, а не по всему svg.

js:

const ns = 'http://www.w3.org/2000/svg'
...
generateTextBlock(c, e) {
  const g = document.createElementNS(ns, 'g')
  g.setAttributeNS(null, 'id', e._id)

  const circle = document.createElementNS(ns, 'circle')
  circle.setAttributeNS(null, 'cx', c.x + 30)
  circle.setAttributeNS(null, 'cy', c.y + 30)
  circle.setAttributeNS(null, 'r', 30)
  circle.setAttributeNS(null, 'fill', '#f06')

  const text = document.createElementNS(ns, 'text')
  text.setAttributeNS(null, 'x', '50%')
  text.setAttributeNS(null, 'y', '50%')
  text.setAttributeNS(null, 'alignment-baseline', 'middle')
  text.setAttributeNS(null, 'text-anchor', 'middle')
  text.appendChild(document.createTextNode(e.label))

  g.appendChild(circle)
  g.appendChild(text)
  return g
},

html:

<svg
  :id="`${constructorId}-svg-area`"
  viewBox="0 0 400 550"
  xmlns="http://www.w3.org/2000/svg"
>
  <!-- dynamic generate -->
</svg>
5
  • 2
    у группы нет размеров, можно использовать svg вложенный в svg.. 29 июл 2020 в 9:53
  • ех печально, @StrangerintheQ спасибо за ответ 29 июл 2020 в 10:00
  • можно уже после отрисовки узнать размеры группы и спозиционировать текст скриптом 29 июл 2020 в 10:01
  • @StrangerintheQ дело в том что мне нужно похожое поведение как в draw.io, двойной клик по элементу и можно менять текст) 29 июл 2020 в 10:04
  • 1
    ru.stackoverflow.com/a/985185/188366 вот тут есть нечто подобное, хоть ответ в целом и не про это 29 июл 2020 в 10:08

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.