Замена формы клипа на SVG - PullRequest
Новая
       10

Замена формы клипа на SVG

0 голосов
/ 01 ноября 2018

У меня есть полигон с текстом внутри, показанным ниже 

.title {
  clip-path: polygon(1% 0, 100% 15%, 96% 90%, 0 75%);
  background-color: blue;
  
  color: #FFF;
  font-size: 1.7em;
  line-height: 50px;
  
  height: 60px;
  width: 250px;
}
<h1 class="title">&nbsp;&nbsp;WELCOME TO</h1>

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

Затем для текста после исследования я узнал о теге внутри тега, но даже о том, что я пытаюсь отформатировать текст. 

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 7 9" version="1">
      <polygon points=".1 0,5 .2,4.4 1.8,0 1.6" style="fill: #253234;" />
      <text x="1" y="1" fill="white" style="font-family:arial; font-size:.4">WELCOME TO</text>
    </svg>

Кто-нибудь знает лучший способ сделать это, который работает на основных браузерах и устройствах?

Ответы [ 2 ]

0 голосов
/ 01 ноября 2018

Поскольку первая и вторая версии, которые вы дали, сильно отличаются друг от друга, я не уверен, чего вы хотите достичь. Я иду в основном с первым.

Основной трюк заключается в том, как вы используете атрибут viewBox (и его последующий preserveAspectRatio). Думайте о viewBox как о прямоугольнике, который вписывается в область, которую вы определяете с помощью width и height. (здесь это прописано в CSS.) preserveAspectRatio описывает правило подбора: выберите максимально возможный размер для прямоугольника, который помещается внутри элемента, и переместите его влево и вертикально к середине.

Все внутри <svg> теперь останется фиксированным в положении и пропорции к этому прямоугольнику. Если вы увеличите высоту элемента, размер текста увеличится; и если вы уменьшите его ширину, в конечном итоге он будет уменьшаться, но всегда вместе с многоугольником.

Я поместил текст с text-anchor: middle, что эквивалентно text-align: center для SVG. Использование размера шрифта 0,4, как вы сделали, не очень хорошая идея; браузеры склонны обрабатывать значения ниже 1 некорректно.

Наконец, если вы используете это вместо тега <h1>, вы должны либо окружить его этим, чтобы сохранить доступность, либо установить соответствующие атрибуты ARIA, как показано: 

.title {
  height: 60px;
  width: 100%;
  display: block; /* not needed if surrounded by <h1> */
}

.title polygon {
  fill: blue;
}

.title text {
    font-family: Arial;
    font-size: 24px;
    fill: #FFF;
    text-anchor: middle;
}
<svg class="title" viewBox="0 0 250 60" preserveAspectRatio="xMinYMid meet"
     aria-role="heading" aria-level="1">
    <polygon points="2.5,0 250,9 240,54 0 45" />
    <text x="125" y="36">WELCOME TO</text>
</svg>
0 голосов
/ 01 ноября 2018

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

запустите фрагмент для примера, который вы можете настроить в соответствии со своими потребностями. 

.container {
  transform:rotate(3deg);
  display:inline-block;
  position:relative;
  top:50px;
  padding:20px 30px 20px 20px;
  background-color:blue;
}
.container:after {
  content:'';
  display:block;
  background:white;
  width:20px;
  height:110%;
  position:absolute;
  top:0;
  right:-10px;
  transform:rotate(10deg);
}
.title {
  color:#fff;
  display:inline-block;
  font-size:18pt;
  text-transform:uppercase;
  font-family:arial;
  transform:rotate(-3deg)
}
<div class="container"><span class="title">Welcome to </span></div>
...