Сделать внутренние отступы одинаковыми к дочернему объекту SVG
2 Объекта, черный квадрат и текст который я сделала как суммой или оконтурила...
Как выравнивать объект, разобралась. Но так же рассчитываю разобраться в том, как сделать чтобы внутренние отступы черного квадрата относительно внутреннего объекта(наименьшего) были одинаковыми.
Причем сделать так, чтобы размеры менялись именно у черного квадрата, а не растягивался или сжимался объект текста...
Как вариант, высчитывать и сдвигать. Быть может есть возможность делать это на автомате. Указывая только внутренний отступ...
Второй вопрос. Делаю Разность и на черном квадрате наименьший объект будет как бы врезан. Возможно выполнить так, чтобы 2 объекта были как одно целое. Как при разности, только наименьший объект не был вырезан. Скажем был белого цвета или желтого, один объект... Не два...
Ответы (2 шт):
1. Внутренние отступы в SVG
Чтобы создать равномерные внутренние отступы вокруг текста внутри черного квадрата в SVG, можно использовать padding. В SVG нет прямого свойства для этого, но можно воспользоваться комбинацией атрибутов viewBox и preserveAspectRatio, а также вручную подгонять размеры.
Пример кода:
<svg width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
<rect x="10" y="10" width="180" height="180" fill="black"/>
<text x="100" y="100" fill="white" text-anchor="middle" alignment-baseline="middle">Текст</text>
</svg>
Здесь отступы создаются путем изменения атрибутов x и y для rect и text. Так можно настроить отступы вручную.
2. Объединение двух объектов в SVG
Чтобы создать эффект, при котором меньший объект выглядит как бы встроенным в больший, можно воспользоваться группировкой (<g>) и наложением объектов. Например:
<svg width="200" height="200" viewBox="0 0 200 200">
<rect x="10" y="10" width="180" height="180" fill="black"/>
<rect x="60" y="60" width="80" height="80" fill="yellow"/>
</svg>
В данном примере желтый квадрат находится внутри черного квадрата. Они сгруппированы и выглядят как единый объект.
Надеюсь, это поможет вам в решении ваших задач. Если у вас возникнут дополнительные вопросы или потребуется уточнение, пишите комментарий к ответу)
Отвечаю на два вопроса сразу.
В Inkscape можно вытягивать из линеек направляющие.
.
Вы можете разметить на макете направляющие под нужные вам размеры до рисования.
Тогда элементы рядом с направляющими будут "прилипать" к ним автоматически.
По двойному клику на направляющую, открывается окно, где можно указать точное значение.
Кстати, направляющие не обязательно параллельные и перпендикулярные друг-другу. Их можно делать косыми, то есть править под любой угол.