Блог

Главная - Вопросы по программированию - SVG с атрибутом reFX / reFX и размещением относительно его центра

SVG с атрибутом reFX / reFX и размещением относительно его центра

#svg #browser

#svg #браузер

Вопрос:

Согласно документации по символам SVG, я могу добавить к нему атрибуты reFX / refY .

Если я правильно понимаю, я могу использовать эти атрибуты для определения опорной точки в системе координат символа, поэтому, когда я ссылаюсь на него с <use> помощью элемента, он будет размещен относительно этой опорной точки (вместо левого верхнего угла по умолчанию).

Но эти атрибуты, похоже, этого не делают или вообще не влияют на размещение символа. Я не могу найти никакой дополнительной информации об этих атрибутах (для символа) или о том, поддерживаются ли они в любом браузере.

Действительно ли так должен работать reFX / refY? Реализованы ли они в каких-либо браузерах?

Если нет, есть ли какой-либо другой способ разместить символ с <use> элементом относительно центра символа, не зная / не вычисляя его фактическую ширину / высоту заранее?

Комментарии:

1. Как вы обнаружили, ни один браузер их не поддерживает

2. Да, но я не был уверен, что правильно понимаю документы или правильно их использую.

3. Как вы можете использовать что-то, чего не реализовал ни один браузер?

4. Как я мог знать, что они не были реализованы? Это нигде не упоминается (reFX / refY для <marker>, похоже, работает, несмотря на то, что поддержка для них также нигде не упоминается). Итак, я подумал, что что-то упустил.

5. @danielv FWIW Я тоже пришел сюда, прочитав об этой функции в документах и предположив, что она реальна. это то, что мы получаем для RTFM 😂

Ответ №1:

Я также обнаружил, что reFX и refY не работают с символами. Я нашел обходной путь, чтобы эффективно сделать то же самое. Ключом является установка переменной символа «переполнение» равной «видимой». Точка вставки символа при использовании функции «использовать» всегда является началом координат (координата 0,0) системы координат символов, поэтому вам просто нужно настроить свой символ таким образом, чтобы начало символов находилось поверх точки, в которую вы хотели бы его вставить. Я обнаружил, что это легко сделать с помощью преобразования, потому что вам просто нужно использовать отрицательные значения для нужной точки вставки.

Пример того, как сделать точку вставки центром квадрата:

 <symbol id="test" overflow="visible" >
   <g transform="translate(-50 -50)" >
      <rect x="0" y="0" width="100" height="100" stroke="black"/>
   </g>
</symbol>