Мне нужно изменить размер и повернуть определенные элементы в документе SVG с помощью javascript. Проблема в том, что по умолчанию он всегда применяет преобразование вокруг начала координат (0, 0)
вверху слева.
Как я могу переопределить эту точку привязки преобразования?
Я пробовал использовать transform-origin
атрибут, но он ни на что не влияет.
Вот как я это сделал:
svg.getDocumentById('someId').setAttribute('transform-origin', '75 240');
Кажется, он не устанавливает ключевую точку в указанную мной точку, хотя в Firefox я вижу, что атрибут установлен правильно. Я пробовал такие вещи, как center bottom
и 50% 100%
со скобками, и без них. Пока ничего не работало.
Кто-нибудь может помочь?
svg
coordinate-transformation
CTheDark
источник
источник
Ответы:
Для поворота используйте
transform="rotate(deg, cx, cy)"
, где deg - это градус, на который вы хотите повернуть, а (cx, cy) определяет центр вращения.Для масштабирования / изменения размера вам нужно перевести с помощью (-cx, -cy), затем масштабировать, а затем перевести обратно в (cx, cy). Вы можете сделать это с помощью матричного преобразования :
Где sx - коэффициент масштабирования по оси x, sy - по оси y.
источник
Если вы можете использовать фиксированное значение (не «центр» или «50%»), вы можете вместо этого использовать CSS:
Некоторые браузеры (например, Firefox) некорректно обрабатывают относительные значения.
источник
element.setAttribute('transform-origin', '25px 25px')
?Если вы похожи на меня и хотите панорамировать, а затем масштабировать с помощью transform-origin, вам понадобится немного больше.
Вот он работает: http://forresto.github.io/dataflow-prototyping/react/
источник
id
совпадение атрибутовgetElementById
и документовid="..."
. Трудно узнать наверняка, не увидев кода. Если вы не хотите публиковать его как вопрос SO, вы можете попробовать создать простейший пример, используя свои имена атрибутов, пока он неДля масштабирования без использования
matrix
преобразования:И вот это в CSS:
источник
похоже, мы все здесь упустили одну хитрость:
transform-box: fill-box
использование
transform-box: fill-box
заставит элемент в SVG вести себя как обычный элемент HTML. Затем вы можете подать заявкуtransform-origin: center
(или что-то еще), как обычновсе верно,
transform-box: fill-box
никаких сложных матричных штучекисточник
transform-box: fill-box;
вы можете сделать svg elementes уважениеtransform-origin
разумным способом / как и следовало ожидать!У меня была аналогичная проблема. Но я использовал D3 для позиционирования своих элементов и хотел, чтобы преобразование и переход выполнялись с помощью CSS. Это был мой исходный код, с которым я работал в Chrome 65:
Это позволило мне установить
cx
,cy
иtransform-origin
значение в JavaScript , используя одни и те же данные.НО это не сработало в Firefox! Что мне нужно было сделать, так это заключить тег
circle
вg
тег иtranslate
использовать ту же формулу позиционирования, что и выше. Затем я приложилcircle
вg
теге, и установить егоcx
иcy
значение0
. Оттудаtransform: scale(2)
будет масштабироваться от центра, как и ожидалось. Окончательный код выглядел так.После внесения этого изменения я изменил свой CSS, чтобы нацелить его
circle
вместо.dot
, чтобы добавитьtransform: scale(2)
. Мне даже не нужно было пользоватьсяtransform-origin
.НОТЫ:
Я использую
d3-selection-multi
во втором примере. Это позволяет мне передавать объект.attrs
вместо повторения.attr
для каждого атрибута.При использовании строкового литерала шаблона помните о переносах строк, как показано в первом примере. Это будет включать в себя новую строку в выводе и может нарушить ваш код.
источник
svg:transform-origin.enabled
прив в Фирефоксеabout:config
странице. Но ... это не казалось адекватным решением. Я также обнаружил несоответствие междуtransform-origin: 50% 50%
иtransform-origin: center center
.