Как нарисовать букву B средствами SVG?
<svg>
<polyline stroke-width='4' stroke='red' points='20,80 20,130 50,130 50,105 20,105 20,80 50,80 50,110' fill='none' />
</svg>
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак нарисовать букву B средствами SVG?
<svg>
<polyline stroke-width='4' stroke='red' points='20,80 20,130 50,130 50,105 20,105 20,80 50,80 50,110' fill='none' />
</svg>
html, body, svg {
display: block;
margin: auto;
height: 100%;
}
path {
fill: none;
stroke: black;
stroke-width: .125;
stroke-linecap: round;
stroke-linejoin: round;
}
<svg viewBox="-0.125 -0.125 1.25 2.25">
<path d="M 0 0 h .4 a .4 .4 0 0 1 0 .8 h -.4 h .4 a .6 .6 0 0 1 0 1.2 h -.4 z" />
</svg>
С помощью векторного редактора можно выбрать любой шрифт, любой размер
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g aria-label="B" style="-inkscape-font-specification:Tahoma;fill:red;font-family:Tahoma;font-size:53.3;letter-spacing:0;line-height:13;word-spacing:0">
<path d="m63.5 54.3q0 2.9-1.1 5.1-1.1 2.2-2.9 3.6-2.2 1.7-4.7 2.4-2.5 0.7-6.5 0.7H37.2V27.4h10.3q4.1 0 6.2 0.3 2.1 0.3 4 1.3 2.1 1.1 3 2.9 1 1.8 1 4.2 0 2.7-1.5 4.9-1.4 2.2-4 3.4v0.2q3.5 0.9 5.4 3.4 1.9 2.5 1.9 6.2zm-7.2-17.4q0-1.4-0.5-2.4-0.5-1-1.5-1.6-1.2-0.7-2.8-0.9-1.5-0.2-4.2-0.2h-4.9v11.4h5.9q2.4 0 3.6-0.2 1.1-0.3 2.4-1 1.2-0.8 1.7-2 0.5-1.2 0.5-3zm1.8 17.6q0-2.2-0.6-3.6-0.6-1.4-2.5-2.4-1.2-0.7-2.7-0.8-1.4-0.2-4.1-0.2h-5.9v14.3h4.2q3.4 0 5.3-0.3 2-0.3 3.4-1.3 1.5-1 2.1-2.3 0.7-1.3 0.7-3.4z"/>
</g>
</svg>
ну лично я честно пишу код под букву - не рисую и ниоткуда не копирую)
Ну не всегда это возможно, проще всё же сделать это в векторном редакторе. Буквально 2 минуты займет:
создать и править текстовые объекты
или F8 path
Вот например такую букву проблематично ручками без редактора сделать :
<svg class="wrap" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" height="30vh" viewBox="20 20 100 100" >
<g>
<path fill="crimson" d="m38.1 32.4 22.8 29.8c-10.1 1.2-14.1 7.5-17.4 16.7-2.1 6-3.7 12.3-6.5 18.2h8.5c2.1-4.3 3.6-10.6 5.3-15.2 3.1-8.8 6.2-14.5 16.6-14.5h3v29.7h8.1v-29.7h2.9c10.4 0 13.5 5.7 16.6 14.5 1.5 4.6 3.1 10.8 5.3 15.2h8.5c-2.7-6-4.2-12.2-6.3-18.3-3.3-9.2-7.4-15.6-17.6-16.6l22.9-29.8h-9.7l-20.1 28.7h-2.6v-28.7h-8.1v28.7h-2.6l-20.1-28.7z"/>
</g>
</svg>
Ниже пример, как оформляют детские сказки, с оч. большой первой буквой:
.Letter {
max-width:1000px;
margin: 1rem;
}
.wrap {
float:left;
}
img {
float:right;
margin: 7px 0 7px 7px;
}
svg {
height:100px;
}
span {
font-size:18px;
}
<svg class="wrap" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="20 20 100 100" >
<g>
<path fill="crimson" d="m38.1 32.4 22.8 29.8c-10.1 1.2-14.1 7.5-17.4 16.7-2.1 6-3.7 12.3-6.5 18.2h8.5c2.1-4.3 3.6-10.6 5.3-15.2 3.1-8.8 6.2-14.5 16.6-14.5h3v29.7h8.1v-29.7h2.9c10.4 0 13.5 5.7 16.6 14.5 1.5 4.6 3.1 10.8 5.3 15.2h8.5c-2.7-6-4.2-12.2-6.3-18.3-3.3-9.2-7.4-15.6-17.6-16.6l22.9-29.8h-9.7l-20.1 28.7h-2.6v-28.7h-8.1v28.7h-2.6l-20.1-28.7z"/>
</g>
</svg>
<div class="Letter">
<img src="https://i.stack.imgur.com/lA6pe.jpg" />
<span>
Жили-были муж с женой, и была у них дочка. Заболела жена и умерла. Погоревал-погоревал мужик да и женился на другой.
Невзлюбила злая баба девочку, била ее, ругала, только и думала, как бы совсем извести, погубить.
Вот раз уехал отец куда-то, а мачеха и говорит девочке:
- Поди к моей сестре, твоей тетке, попроси у нее иголку да нитку - тебе рубашку сшить.
А тетка эта была баба-яга, костяная нога. Не посмела девочка отказаться, пошла, да прежде зашла к своей родной тетке.
- Здравствуй, тетушка!
- Здравствуй, родимая! Зачем пришла?
- Послала меня мачеха к своей сестре попросить иголку и нитку - хочет мне рубашку сшить.
- Хорошо, племянница, что ты прежде ко мне зашла, - говорит тетка. - Вот тебе ленточка, масло, хлебец да мяса кусок. Будет там тебя березка в глаза стегать - ты ее ленточкой перевяжи; будут ворота скрипеть да хлопать, тебя удерживать - ты подлей им под пяточки маслица; будут тебя собаки рвать - ты им хлебца брось; будет тебе кот глаза драть - ты ему мясца дай.
Поблагодарила девочка свою тетку и пошла.
Шла она, шла и пришла в лес. Стоит в лесу за высоким тыном избушка на курьих ножках, на бараньих рожках, а в избушке сидит баба-яга, костяная нога - холст ткет.
- Здравствуй, тетушка! - говорит девочка.
- Здравствуй, племянница! - говорит баба-яга. - Что тебе надобно?
- Меня мачеха послала попросить у тебя иголочку и ниточку - мне рубашку сшить.
- Хорошо, племяннушка, дам тебе иголочку да ниточку, а ты садись покуда поработай!
Вот девочка села у окна и стала ткать.
А баба-яга вышла из избушки и говорит своей работнице:
- Я сейчас спать лягу, а ты ступай, истопи баню и вымой племянницу. Да смотри, хорошенько вымой: проснусь - съем ее!
Девочка услыхала эти слова - сидит ни жива, ни мертва. Как ушла баба-яга, она стала просить работницу:
- Родимая моя! Ты не столько дрова в печи поджигай, сколько водой заливай, а воду решетом носи! - И ей подарила платочек.
Работница баню топит, а баба-яга проснулась, подошла к окошку и спрашивает:
- Ткешь ли ты, племяннушка, ткешь ли, милая?
- Тку, тетушка, тку, милая!
Баба-яга опять спать легла, а девочка дала коту мясца и спрашивает:
- Котик-братик, научи, как мне убежать отсюда.
Кот говорит:
- Вон на столе лежит полотенце да гребешок, возьми их и беги поскорее: не то баба-яга съест! Будет за тобой гнаться баба-яга - ты приложи ухо к земле. Как услышишь, что она близко, брось гребешок - вырастет густой дремучий лес. Пока она будет сквозь лес продираться, ты далеко убежишь. А опять услышишь погоню - брось полотенце: разольется широкая да глубокая река.
- Спасибо тебе, котик-братик! - говорит девочка.
Поблагодарила она кота, взяла полотенце и гребешок и побежала.
Бросились на нее собаки, хотели ее рвать, кусать, - она им хлеба дала. Собаки ее и пропустили.
</span>
</div>
N
уже ответил. – Qwertiy♦ 18 дек '19 в 8:55