Как сделать текст в прямоугольнике css

Как разместить и центрировать текст в прямоугольнике SVG

Я хотел бы сосредоточить слово "Fiction" внутри него. Для других прямоугольников, не svg перенос по словам, чтобы оставаться в них? Кажется, я не могу найти ничего конкретного о вставке текста в фигуры, центрированные как по горизонтали, так и по вертикали, а также перенос слов. Кроме того, текст не может покинуть прямоугольник.

Просмотр примера http:/ / www.w3.org/TR/SVG / text. html# TextElement не помогает, так как x и y текстового элемента отличаются от X и y прямоугольника. Похоже, что для текстовых элементов не существует ширины и высоты. Я не уверен в математике здесь.

(Мой html table просто не будет работать.)

10 ответов

Я использую метод drawString() для рисования строки с помощью графики, но я хочу центрировать свой текст в прямоугольнике. Как мне это сделать?

Я действительно не знаком с SVG-ми годами, поэтому мне очень жаль, если это на самом деле довольно простая проблема.. Я создаю SVG: <svg height=100% width=100%> <rect x=0 y=0 width=100% height=100% fill=#da552f></rect> <image.

Простое решение для центрирования текста по горизонтали и вертикали в SVG:

Установите положение текста в абсолютном центре элемента, в котором вы хотите его центрировать:

  • Если это родитель, вы можете просто сделать x="50%" y ="50%" .
  • Если это другой элемент, x будет x этого элемента + половина его ширины (и аналогично для y , но с высотой).

Используйте свойство text-anchor для горизонтального центрирования текста со значением middle :

средний

Отрисованные символы выровнены таким образом, что геометрическая середина результирующего отрисованного текста находится в начальной текущей позиции текста.

Используйте свойство dominant-baseline , чтобы центрировать текст по вертикали со значением middle (или, в зависимости от того, как вы хотите, чтобы он выглядел, вы можете сделать central )

Вот простая демонстрация:

SVG 1.2 добавлена перенос текста, но большинство реализаций SVG, которые вы найдете в браузере (за исключением Opera), не реализовали эту функцию. Обычно вам, разработчику, приходится размещать текст вручную.

Спецификация SVG 1.1 дает хороший обзор этого ограничения и возможных решений для его преодоления:

  • Автору или авторскому пакету необходимо предварительно вычислить разрывы строк и использовать несколько "текстовых" элементов (по одному для каждого строка текста).
  • Автору или авторскому пакету необходимо предварительно вычислить строку разрывы и использование одного элемента "текст" с одним или несколькими дочерними элементами "tspan" с соответствующими значениями атрибутов "x", "y", " dx " и " dy " для установки новых начальных позиций для них персонажи, которые начинают новые строки. (Этот подход позволяет пользователю выбирать текст в нескольких строках текста-см. раздел Выбор текста и операции с буфером обмена.)
  • Выразите текст, который будет отображаться в другом пространстве имен XML, например XHTML [XHTML] встроенный встроенный в элемент "foreignObject". (Примечание: точная семантика этого подхода в настоящее время не полностью определена.)

В качестве примитива перенос текста может быть смоделирован с помощью атрибутов dy и элементов tspan , и, как указано в спецификации, некоторые инструменты могут автоматизировать это. Например, в Inkscape выберите нужную форму и нужный текст и используйте Text -> Flow into Frame. Это позволит вам написать свой текст с переносом, который будет переноситься на основе границ фигуры. Кроме того, убедитесь, что вы следуете этим инструкциям, чтобы указать Inkscape поддерживать совместимость с SVG 1.1: http://wiki.inkscape.org/wiki/ индекс.php/FAQ#What_about_flowed_text.3F

Кроме того, существует несколько библиотек JavaScript, которые можно использовать для динамической автоматизации переноса текста: http://www.carto.net/документы/svg/textFlow/

Интересно отметить решение CSVG для переноса фигуры в текстовый элемент (например, см. Их пример "button"), хотя важно отметить, что их реализация не может использоваться в браузере: http://www.csse.monash.edu.au/

Я упоминаю об этом, потому что я разработал библиотеку, вдохновленную CSVG, которая позволяет вам делать подобные вещи и работает в веб-браузерах, хотя я еще не выпустил ее.

Я знаю, как нарисовать текстовую линию в прямоугольнике: <svg width=200 height=100> <rect x=0 y=0 width=200 height=100 stroke=red stroke-width=3px fill=white/> <text x=50% y=50% dominant-baseline=middle text-anchor=middle>TEXT</text> </svg> Теперь я хотел бы, чтобы.

Я пытаюсь центрировать текст в прямоугольнике, но мне это не удается. Я хочу написать код для каждого вида шрифтов. вот мой фрагмент кода .button < display: block; color: rgb(181, 1, 88); background-color: rgb(248, 224, 237); width: 232px; height: 200px; border-radius: 8px; margin-left: 368px;.

Предыдущие ответы дали плохие результаты при использовании закругленных углов или stroke-width , что >1 . Например, можно было бы ожидать, что следующий код создаст закругленный прямоугольник, но углы обрезаются родительским компонентом svg :

Вместо этого я рекомендую обернуть text в svg , а затем вложить этот новый svg и rect вместе в элемент g , как в следующем примере:

Это устраняет проблему отсечения, которая возникает в ответах выше. Я также перевел группу rect/text, используя атрибут transform="translate(x,y)" , чтобы продемонстрировать, что это обеспечивает более интуитивный подход к позиционированию rect/text на экране.

Если вы создаете SVG программно, вы можете упростить его и сделать что-то вроде этого:

Вы можете напрямую использовать свойство text-anchor = "middle" . Я советую создать элемент обертки svg поверх вашего прямоугольника и текста. Таким образом, вы можете использовать весь элемент, используя один селектор css. Убедитесь, что вы разместили ‘x’ и ‘y’ свойства текста как 50%.

Как сделать небольшой квадрат внутри прямоугольника с текстом?

У меня есть скриншот ниже, который я скопировал в HTML и CSS.

enter image description here

Я создал скрипку для приведенного выше снимка экрана. Я использовал Bootstrap 4, чтобы составить таблицу.

Фрагменты HTML и CSS-кодов, которые я использовал для создания строк:

Постановка проблемы:

Мне интересно, какие изменения нужно внести в приведенные выше CSS-коды, чтобы внутри цветного прямоугольника отображалось квадратное поле (отмеченное стрелкой на снимке экрана выше).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *