Как сделать блоки через которые проигрывается видео
Как сделать так, чтобы между текстом в этих блоках играло видео и не в каждом блоке новое а в этих блоках одно видео. Надеюсь объяснил понятно, не могу уже 2 дня додуматься как, а ведь наверное ответ очень прост.
Ответы (2 шт):
Если это не динамический текст, то... для начала вам не помешает определиться с пропорциями видео и соответствующей маски, чтобы потом не страдать. А для работы нужны лишь <video>
и SVG
или png
, или ещё чего-нибудь с прозрачностью (тут дело вкуса). Я выбрал бы первый вариант. По крайней мере это первое, что в голову приходит. Собственно весь фокус в CSS
. Однако, как часто бывает, озвучивают в вопросе одно, а на деле с подвохами.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
}
video {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
position: absolute;
}
svg {
position: absolute;
}
<div class="container">
<video autoplay="" loop="" muted="" playsinline="" src="https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4" type="video/mp4"></video>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90">
<style type="text/css">.back {fill:#898989}</style>
<path d="M160,90V0H0v90H160L160,90z M5,73h20.3v9H5V73L5,73z M51,32H25v-9h26V32L51,32z M116,15H98V6h18V15L116,15z M154.3,48.7h-37v-9h37V48.7L154.3,48.7z M154.3,65H62.8v-9h91.5V65L154.3,65z"/>
<g class="back">
<path d="M32.6,74.3c-0.4-0.2-0.9-0.3-1.5-0.3c-0.9,0-1.7,0.4-2.3,1.1C28.3,75.8,28,76.8,28,78c0,1.2,0.3,2.2,0.9,2.9
c0.6,0.7,1.3,1.1,2.3,1.1c0.6,0,1-0.1,1.5-0.3c0.4-0.2,0.7-0.6,1-1v1.1h1.3V71.2h-1.3v4.1C33.3,74.9,33,74.5,32.6,74.3L32.6,74.3z
M29.9,75.8c0.4-0.5,0.9-0.8,1.6-0.8c0.7,0,1.2,0.3,1.6,0.8c0.4,0.5,0.6,1.3,0.6,2.2c0,0.9-0.2,1.7-0.6,2.2
c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.3-0.6-2.2C29.3,77.1,29.5,76.4,29.9,75.8L29.9,75.8z M42,75.9
c0.4,0.5,0.6,1.2,0.6,2.2c0,0.9-0.2,1.6-0.6,2.2c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.2-0.6-2.2
c0-0.9,0.2-1.6,0.6-2.2c0.4-0.5,0.9-0.8,1.6-0.8C41.1,75.1,41.6,75.3,42,75.9L42,75.9z M37.8,75.1c-0.6,0.7-0.9,1.7-0.9,3
c0,1.3,0.3,2.2,0.9,2.9c0.6,0.7,1.5,1.1,2.6,1.1c1.1,0,2-0.4,2.6-1.1c0.6-0.7,0.9-1.7,0.9-2.9c0-1.3-0.3-2.2-0.9-3
c-0.6-0.7-1.5-1.1-2.6-1.1C39.3,74,38.5,74.4,37.8,75.1L37.8,75.1z M56.1,75c-0.6-0.7-1.4-1-2.4-1c-1.1,0-2.1,0.4-2.7,1.1
c-0.7,0.7-1,1.7-1,3c0,1.2,0.4,2.2,1.1,2.9c0.7,0.7,1.7,1.1,2.9,1.1c0.5,0,1-0.1,1.4-0.2c0.5-0.1,0.9-0.2,1.4-0.4v-1.2
c-0.4,0.2-0.9,0.4-1.4,0.5C54.9,80.9,54.5,81,54,81c-0.8,0-1.5-0.2-2-0.7c-0.5-0.5-0.7-1.1-0.8-2H57v-0.6
C57,76.6,56.7,75.7,56.1,75L56.1,75z M51.3,77.3c0.1-0.7,0.3-1.3,0.7-1.7c0.4-0.4,1-0.6,1.7-0.6c0.6,0,1.1,0.2,1.5,0.6
c0.4,0.4,0.6,1,0.6,1.6L51.3,77.3L51.3,77.3z M59.1,81.8h1.3v-7.7h-1.3V81.8L59.1,81.8z M59.1,72.8h1.3v-1.6h-1.3V72.8L59.1,72.8z
M63.5,81.2c0.5,0.5,1.1,0.8,2,0.8c0.5,0,1-0.1,1.4-0.3c0.4-0.2,0.8-0.6,1.1-1v1.2h1.3v-7.7H68v4.3c0,0.7-0.2,1.3-0.6,1.8
c-0.4,0.4-0.9,0.6-1.6,0.6c-0.6,0-1-0.2-1.3-0.5c-0.3-0.4-0.4-0.9-0.4-1.6v-4.6h-1.3v4.6C62.8,79.9,63.1,80.7,63.5,81.2L63.5,81.2z
M75.6,74.1C75.2,74,74.7,74,74.3,74c-0.9,0-1.7,0.2-2.2,0.6c-0.5,0.4-0.8,0.9-0.8,1.7c0,0.6,0.2,1.1,0.5,1.4
c0.3,0.3,0.9,0.6,1.7,0.8l0.4,0.1c0.8,0.2,1.3,0.3,1.5,0.5c0.2,0.2,0.3,0.4,0.3,0.8c0,0.4-0.2,0.7-0.5,0.9C75.1,80.9,74.6,81,74,81
c-0.4,0-0.9-0.1-1.3-0.2c-0.5-0.1-0.9-0.3-1.4-0.5v1.3c0.5,0.2,1,0.3,1.4,0.4C73.1,82,73.6,82,74,82c1,0,1.8-0.2,2.3-0.6
c0.6-0.4,0.8-1,0.8-1.7c0-0.6-0.2-1.1-0.6-1.5c-0.4-0.3-1-0.6-1.9-0.8l-0.4-0.1c-0.7-0.2-1.1-0.3-1.3-0.5c-0.2-0.2-0.3-0.4-0.3-0.7
c0-0.4,0.2-0.7,0.5-0.9c0.3-0.2,0.8-0.3,1.4-0.3c0.4,0,0.8,0,1.2,0.1c0.4,0.1,0.8,0.2,1.1,0.4v-1.2C76.4,74.3,76,74.2,75.6,74.1
L75.6,74.1z M84.2,74.4c-0.4-0.3-0.9-0.4-1.4-0.4c-0.6,0-1,0.1-1.4,0.3c-0.4,0.2-0.7,0.6-1,1v-1.2h-1.3v7.7h1.3v-4.3
c0-0.7,0.2-1.3,0.6-1.8c0.4-0.4,0.9-0.7,1.5-0.7c0.5,0,0.9,0.2,1.2,0.5c0.3,0.4,0.4,0.9,0.4,1.6v4.6h1.3v-4.3
c0-0.7,0.2-1.3,0.6-1.8c0.4-0.4,0.9-0.6,1.5-0.6c0.5,0,0.9,0.2,1.2,0.5c0.3,0.4,0.4,0.9,0.4,1.6v4.6h1.3v-4.6c0-1-0.2-1.8-0.6-2.4
c-0.4-0.6-1-0.8-1.8-0.8c-0.6,0-1.1,0.1-1.5,0.4c-0.4,0.3-0.8,0.7-1.1,1.3C84.9,75.1,84.6,74.7,84.2,74.4L84.2,74.4z M97.3,75.9
c0.4,0.5,0.6,1.2,0.6,2.2c0,0.9-0.2,1.6-0.6,2.2c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.2-0.6-2.2
c0-0.9,0.2-1.6,0.6-2.2c0.4-0.5,0.9-0.8,1.6-0.8C96.4,75.1,96.9,75.3,97.3,75.9L97.3,75.9z M93.2,75.1c-0.6,0.7-0.9,1.7-0.9,3
c0,1.3,0.3,2.2,0.9,2.9c0.6,0.7,1.5,1.1,2.6,1.1c1.1,0,2-0.4,2.6-1.1c0.6-0.7,0.9-1.7,0.9-2.9c0-1.3-0.3-2.2-0.9-3
c-0.6-0.7-1.5-1.1-2.6-1.1C94.6,74,93.8,74.4,93.2,75.1L93.2,75.1z M105.4,74.3c-0.4-0.2-0.9-0.3-1.5-0.3c-0.9,0-1.7,0.4-2.3,1.1
c-0.6,0.7-0.9,1.7-0.9,2.9c0,1.2,0.3,2.2,0.9,2.9c0.6,0.7,1.3,1.1,2.3,1.1c0.6,0,1-0.1,1.5-0.3c0.4-0.2,0.7-0.6,1-1v1.1h1.3V71.2
h-1.3v4.1C106.1,74.9,105.8,74.5,105.4,74.3L105.4,74.3z M102.7,75.8c0.4-0.5,0.9-0.8,1.6-0.8c0.7,0,1.2,0.3,1.6,0.8
c0.4,0.5,0.6,1.3,0.6,2.2c0,0.9-0.2,1.7-0.6,2.2c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.3-0.6-2.2
C102.1,77.1,102.3,76.4,102.7,75.8L102.7,75.8z M114.7,72v2.2h-0.9v1h0.9v4.2c0,1,0.2,1.6,0.6,2c0.4,0.4,1,0.5,2,0.5h1.3v-1.1h-1.3
c-0.5,0-0.9-0.1-1-0.3c-0.2-0.2-0.3-0.6-0.3-1.2v-4.2h2.6v-1h-2.6V72H114.7L114.7,72z M125.8,75c-0.6-0.7-1.4-1-2.4-1
c-1.1,0-2.1,0.4-2.7,1.1c-0.7,0.7-1,1.7-1,3c0,1.2,0.4,2.2,1.1,2.9c0.7,0.7,1.7,1.1,2.9,1.1c0.5,0,1-0.1,1.4-0.2
c0.5-0.1,0.9-0.2,1.4-0.4v-1.2c-0.4,0.2-0.9,0.4-1.4,0.5c-0.5,0.1-0.9,0.2-1.4,0.2c-0.8,0-1.5-0.2-2-0.7c-0.5-0.5-0.7-1.1-0.8-2
h5.8v-0.6C126.7,76.6,126.4,75.7,125.8,75L125.8,75z M121,77.3c0.1-0.7,0.3-1.3,0.7-1.7c0.4-0.4,1-0.6,1.7-0.6
c0.6,0,1.1,0.2,1.5,0.6c0.4,0.4,0.6,1,0.6,1.6L121,77.3L121,77.3z M133.9,74.4c-0.4-0.3-0.9-0.4-1.4-0.4c-0.6,0-1,0.1-1.4,0.3
s-0.7,0.6-1,1v-1.2h-1.3v7.7h1.3v-4.3c0-0.7,0.2-1.3,0.6-1.8c0.4-0.4,0.9-0.7,1.5-0.7c0.5,0,0.9,0.2,1.2,0.5
c0.3,0.4,0.4,0.9,0.4,1.6v4.6h1.3v-4.3c0-0.7,0.2-1.3,0.6-1.8c0.4-0.4,0.9-0.6,1.5-0.6c0.5,0,0.9,0.2,1.2,0.5
c0.3,0.4,0.4,0.9,0.4,1.6v4.6h1.3v-4.6c0-1-0.2-1.8-0.6-2.4c-0.4-0.6-1-0.8-1.8-0.8c-0.6,0-1.1,0.1-1.5,0.4
c-0.4,0.3-0.8,0.7-1.1,1.3C134.6,75.1,134.3,74.7,133.9,74.4L133.9,74.4z M144.6,81.7c0.4,0.2,0.9,0.3,1.4,0.3
c0.9,0,1.7-0.4,2.3-1.1c0.6-0.7,0.9-1.7,0.9-2.9c0-1.2-0.3-2.2-0.9-2.9c-0.6-0.7-1.3-1.1-2.3-1.1c-0.6,0-1,0.1-1.4,0.3
c-0.4,0.2-0.7,0.6-1,1v-1.2h-1.3v10.6h1.3v-4.1C143.9,81.1,144.2,81.5,144.6,81.7L144.6,81.7z M147.3,80.2
c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.3-0.6-2.2c0-0.9,0.2-1.7,0.6-2.2c0.4-0.5,0.9-0.8,1.6-0.8
c0.7,0,1.2,0.3,1.6,0.8c0.4,0.5,0.6,1.3,0.6,2.2C147.9,78.9,147.7,79.7,147.3,80.2L147.3,80.2z M151.5,81.8h1.4v-1.7h-1.4V81.8
L151.5,81.8z"/>
<path d="M12,58.2c-0.6-0.7-1.4-1-2.4-1c-1.1,0-2.1,0.4-2.7,1.1c-0.7,0.7-1,1.7-1,3c0,1.2,0.4,2.2,1.1,2.9
c0.7,0.7,1.7,1.1,2.9,1.1c0.5,0,1-0.1,1.4-0.2c0.5-0.1,0.9-0.2,1.4-0.4v-1.2c-0.4,0.2-0.9,0.4-1.4,0.5c-0.5,0.1-0.9,0.2-1.4,0.2
c-0.8,0-1.5-0.2-2-0.7c-0.5-0.5-0.7-1.1-0.8-2h5.8v-0.6C12.9,59.8,12.6,58.9,12,58.2L12,58.2z M7.1,60.5c0.1-0.7,0.3-1.3,0.7-1.7
c0.4-0.4,1-0.6,1.7-0.6c0.6,0,1.1,0.2,1.5,0.6c0.4,0.4,0.6,1,0.6,1.6L7.1,60.5L7.1,60.5z M14.9,65h1.3V54.4h-1.3V65L14.9,65z
M18.8,65h1.3v-7.7h-1.3V65L18.8,65z M18.8,56h1.3v-1.6h-1.3V56L18.8,56z M22.7,55.2v2.2h-0.9v1h0.9v4.2c0,1,0.2,1.6,0.6,2
c0.4,0.4,1,0.5,2,0.5h1.3V64h-1.3c-0.5,0-0.9-0.1-1-0.3C24,63.5,24,63.1,24,62.5v-4.2h2.6v-1H24v-2.2H22.7L22.7,55.2z M28.5,64.5
L28,66.7h0.9l1.1-2.2v-1.2h-1.4V64.5L28.5,64.5z M40.8,57.3c-0.4-0.1-0.8-0.1-1.3-0.1c-0.9,0-1.7,0.2-2.2,0.6
c-0.5,0.4-0.8,0.9-0.8,1.7c0,0.6,0.2,1.1,0.5,1.4c0.3,0.3,0.9,0.6,1.7,0.8l0.4,0.1c0.8,0.2,1.3,0.3,1.5,0.5
c0.2,0.2,0.3,0.4,0.3,0.8c0,0.4-0.2,0.7-0.5,0.9c-0.3,0.2-0.8,0.3-1.4,0.3c-0.4,0-0.9-0.1-1.3-0.2c-0.5-0.1-0.9-0.3-1.4-0.5v1.3
c0.5,0.2,1,0.3,1.4,0.4c0.4,0.1,0.9,0.1,1.3,0.1c1,0,1.8-0.2,2.3-0.6c0.6-0.4,0.8-1,0.8-1.7c0-0.6-0.2-1.1-0.6-1.5
c-0.4-0.3-1-0.6-1.9-0.8l-0.4-0.1c-0.7-0.2-1.1-0.3-1.3-0.5c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.4,0.2-0.7,0.5-0.9
c0.3-0.2,0.8-0.3,1.4-0.3c0.4,0,0.8,0,1.2,0.1c0.4,0.1,0.8,0.2,1.1,0.4v-1.2C41.6,57.5,41.3,57.4,40.8,57.3L40.8,57.3z M50,58.2
c-0.6-0.7-1.4-1-2.4-1c-1.1,0-2.1,0.4-2.7,1.1c-0.7,0.7-1,1.7-1,3c0,1.2,0.4,2.2,1.1,2.9c0.7,0.7,1.7,1.1,2.9,1.1
c0.5,0,1-0.1,1.4-0.2c0.5-0.1,0.9-0.2,1.4-0.4v-1.2c-0.4,0.2-0.9,0.4-1.4,0.5c-0.5,0.1-0.9,0.2-1.4,0.2c-0.8,0-1.5-0.2-2-0.7
c-0.5-0.5-0.7-1.1-0.8-2h5.8v-0.6C50.9,59.8,50.6,58.9,50,58.2L50,58.2z M45.2,60.5c0.1-0.7,0.3-1.3,0.7-1.7c0.4-0.4,1-0.6,1.7-0.6
c0.6,0,1.1,0.2,1.5,0.6c0.4,0.4,0.6,1,0.6,1.6L45.2,60.5L45.2,60.5z M57,57.5c-0.4-0.2-0.9-0.3-1.5-0.3c-0.9,0-1.7,0.4-2.3,1.1
c-0.6,0.7-0.9,1.7-0.9,2.9c0,1.2,0.3,2.2,0.9,2.9c0.6,0.7,1.3,1.1,2.3,1.1c0.6,0,1-0.1,1.5-0.3c0.4-0.2,0.7-0.6,1-1V65h1.3V54.4H58
v4.1C57.8,58.1,57.4,57.7,57,57.5L57,57.5z M54.3,59c0.4-0.5,0.9-0.8,1.6-0.8c0.7,0,1.2,0.3,1.6,0.8c0.4,0.5,0.6,1.3,0.6,2.2
c0,0.9-0.2,1.7-0.6,2.2c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.3-0.6-2.2C53.8,60.3,54,59.6,54.3,59
L54.3,59z"/>
<path d="M6.3,38.4v2.2H5.4v1h0.9v4.2c0,1,0.2,1.6,0.6,2c0.4,0.4,1,0.5,2,0.5h1.3v-1.1H8.9c-0.5,0-0.9-0.1-1-0.3
c-0.2-0.2-0.3-0.6-0.3-1.2v-4.2h2.6v-1H7.6v-2.2H6.3L6.3,38.4z M17.5,41.4c-0.6-0.7-1.4-1-2.4-1c-1.1,0-2.1,0.4-2.7,1.1
c-0.7,0.7-1,1.7-1,3c0,1.2,0.4,2.2,1.1,2.9c0.7,0.7,1.7,1.1,2.9,1.1c0.5,0,1-0.1,1.4-0.2c0.5-0.1,0.9-0.2,1.4-0.4v-1.2
c-0.4,0.2-0.9,0.4-1.4,0.5c-0.5,0.1-0.9,0.2-1.4,0.2c-0.8,0-1.5-0.2-2-0.7c-0.5-0.5-0.7-1.1-0.8-2h5.8v-0.6
C18.4,43,18.1,42.1,17.5,41.4L17.5,41.4z M12.6,43.7c0.1-0.7,0.3-1.3,0.7-1.7c0.4-0.4,1-0.6,1.7-0.6c0.6,0,1.1,0.2,1.5,0.6
c0.4,0.4,0.6,1,0.6,1.6L12.6,43.7L12.6,43.7z M20.4,38.4v2.2h-0.9v1h0.9v4.2c0,1,0.2,1.6,0.6,2c0.4,0.4,1,0.5,2,0.5h1.3v-1.1H23
c-0.5,0-0.9-0.1-1-0.3c-0.2-0.2-0.3-0.6-0.3-1.2v-4.2h2.6v-1h-2.6v-2.2H20.4L20.4,38.4z M26.5,47.6c0.5,0.5,1.1,0.8,2,0.8
c0.5,0,1-0.1,1.4-0.3c0.4-0.2,0.8-0.6,1.1-1v1.2h1.3v-7.7h-1.3v4.3c0,0.7-0.2,1.3-0.6,1.8c-0.4,0.4-0.9,0.6-1.6,0.6
c-0.6,0-1-0.2-1.3-0.5c-0.3-0.4-0.4-0.9-0.4-1.6v-4.6h-1.3v4.6C25.8,46.3,26,47.1,26.5,47.6L26.5,47.6z M39.2,40.5
c-0.1,0-0.2,0-0.3-0.1c-0.1,0-0.2,0-0.3,0c-0.6,0-1.1,0.1-1.5,0.3c-0.4,0.2-0.8,0.6-1,1v-1.2h-1.3v7.7H36v-4c0-0.9,0.2-1.5,0.6-2
c0.4-0.5,0.9-0.7,1.6-0.7c0.2,0,0.4,0,0.6,0.1c0.2,0,0.3,0.1,0.5,0.2L39.2,40.5L39.2,40.5z M49.7,44.4v0.3c0,0.8-0.2,1.5-0.6,2
c-0.4,0.5-1,0.7-1.7,0.7c-0.5,0-0.9-0.1-1.2-0.4c-0.3-0.3-0.4-0.6-0.4-1.1c0-0.6,0.2-1,0.6-1.2c0.4-0.2,1.1-0.3,2.1-0.3H49.7
L49.7,44.4z M50.2,41.3c-0.5-0.6-1.4-0.9-2.5-0.9c-0.4,0-0.8,0-1.3,0.1c-0.4,0.1-0.9,0.2-1.3,0.4v1.2c0.4-0.2,0.8-0.4,1.2-0.5
c0.4-0.1,0.8-0.2,1.3-0.2c0.7,0,1.2,0.2,1.6,0.5c0.4,0.3,0.6,0.8,0.6,1.3v0.1H48c-1.1,0-2,0.2-2.6,0.7c-0.6,0.4-0.9,1.1-0.9,1.9
c0,0.7,0.2,1.3,0.7,1.8c0.5,0.4,1.1,0.7,1.9,0.7c0.6,0,1.1-0.1,1.6-0.3c0.4-0.2,0.8-0.6,1.1-1v1.2H51v-4.4
C51,42.7,50.7,41.8,50.2,41.3L50.2,41.3z M57.6,40.7c-0.4-0.2-0.9-0.3-1.5-0.3c-0.9,0-1.7,0.4-2.3,1.1c-0.6,0.7-0.9,1.7-0.9,2.9
c0,1.2,0.3,2.2,0.9,2.9c0.6,0.7,1.3,1.1,2.3,1.1c0.6,0,1-0.1,1.5-0.3c0.4-0.2,0.7-0.6,1-1v1.1h1.3V37.6h-1.3v4.1
C58.3,41.3,58,40.9,57.6,40.7L57.6,40.7z M54.9,42.2c0.4-0.5,0.9-0.8,1.6-0.8c0.7,0,1.2,0.3,1.6,0.8c0.4,0.5,0.6,1.3,0.6,2.2
c0,0.9-0.2,1.7-0.6,2.2c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.3-0.6-2.2C54.3,43.5,54.5,42.8,54.9,42.2
L54.9,42.2z M62.5,48.2h1.3v-7.7h-1.3V48.2L62.5,48.2z M62.5,39.2h1.3v-1.6h-1.3V39.2L62.5,39.2z M68.6,48.1
c0.4,0.2,0.9,0.3,1.4,0.3c0.9,0,1.7-0.4,2.3-1.1c0.6-0.7,0.9-1.7,0.9-2.9c0-1.2-0.3-2.2-0.9-2.9c-0.6-0.7-1.3-1.1-2.3-1.1
c-0.6,0-1,0.1-1.4,0.3c-0.4,0.2-0.7,0.6-1,1v-1.2h-1.3v10.6h1.3v-4.1C67.8,47.5,68.2,47.9,68.6,48.1L68.6,48.1z M71.3,46.6
c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.3-0.6-2.2c0-0.9,0.2-1.7,0.6-2.2c0.4-0.5,0.9-0.8,1.6-0.8
c0.7,0,1.2,0.3,1.6,0.8c0.4,0.5,0.6,1.3,0.6,2.2C71.8,45.3,71.7,46.1,71.3,46.6L71.3,46.6z M75.2,48.2h1.3v-7.7h-1.3V48.2
L75.2,48.2z M75.2,39.2h1.3v-1.6h-1.3V39.2L75.2,39.2z M82.9,40.5c-0.4-0.1-0.8-0.1-1.3-0.1c-0.9,0-1.7,0.2-2.2,0.6
c-0.5,0.4-0.8,0.9-0.8,1.7c0,0.6,0.2,1.1,0.5,1.4c0.3,0.3,0.9,0.6,1.7,0.8l0.4,0.1c0.8,0.2,1.3,0.3,1.5,0.5
c0.2,0.2,0.3,0.4,0.3,0.8c0,0.4-0.2,0.7-0.5,0.9c-0.3,0.2-0.8,0.3-1.4,0.3c-0.4,0-0.9-0.1-1.3-0.2c-0.5-0.1-0.9-0.3-1.4-0.5V48
c0.5,0.2,1,0.3,1.4,0.4c0.4,0.1,0.9,0.1,1.3,0.1c1,0,1.8-0.2,2.3-0.6c0.6-0.4,0.8-1,0.8-1.7c0-0.6-0.2-1.1-0.6-1.5
c-0.4-0.3-1-0.6-1.9-0.8l-0.4-0.1c-0.7-0.2-1.1-0.3-1.3-0.5c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.4,0.2-0.7,0.5-0.9
c0.3-0.2,0.8-0.3,1.4-0.3c0.4,0,0.8,0,1.2,0.1c0.4,0.1,0.8,0.2,1.1,0.4v-1.2C83.7,40.7,83.3,40.6,82.9,40.5L82.9,40.5z M90.9,40.5
c-0.4-0.1-0.7-0.1-1.1-0.1c-1.2,0-2.1,0.4-2.8,1.1c-0.7,0.7-1,1.7-1,2.9c0,1.2,0.3,2.2,1,2.9c0.7,0.7,1.6,1.1,2.7,1.1
c0.4,0,0.8,0,1.2-0.1c0.4-0.1,0.7-0.2,1.1-0.4v-1.2c-0.4,0.2-0.7,0.3-1.1,0.4c-0.4,0.1-0.7,0.1-1.1,0.1c-0.8,0-1.4-0.3-1.9-0.8
c-0.5-0.5-0.7-1.2-0.7-2.2c0-0.9,0.2-1.7,0.7-2.2c0.5-0.5,1.1-0.8,1.9-0.8c0.4,0,0.7,0,1.1,0.1c0.4,0.1,0.7,0.2,1.1,0.4v-1.2
C91.6,40.7,91.2,40.6,90.9,40.5L90.9,40.5z M94.1,48.2h1.3v-7.7h-1.3V48.2L94.1,48.2z M94.1,39.2h1.3v-1.6h-1.3V39.2L94.1,39.2z
M103.7,41.2c-0.5-0.5-1.1-0.8-2-0.8c-0.5,0-1,0.1-1.4,0.3c-0.4,0.2-0.8,0.6-1.1,1v-1.2H98v7.7h1.3v-4.3c0-0.7,0.2-1.3,0.6-1.8
c0.4-0.4,0.9-0.6,1.6-0.6c0.6,0,1,0.2,1.3,0.5c0.3,0.4,0.4,0.9,0.4,1.6v4.6h1.3v-4.6C104.4,42.6,104.1,41.8,103.7,41.2L103.7,41.2z
M111.3,46.4c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.2-0.6-2.1c0-0.9,0.2-1.6,0.6-2.1
c0.4-0.5,0.9-0.8,1.6-0.8c0.7,0,1.2,0.3,1.6,0.8c0.4,0.5,0.6,1.2,0.6,2.1C111.9,45.2,111.7,45.9,111.3,46.4L111.3,46.4z
M113.2,40.6h-1.3v1.2c-0.3-0.5-0.6-0.8-1-1c-0.4-0.2-0.9-0.3-1.5-0.3c-0.9,0-1.7,0.4-2.3,1.1c-0.6,0.7-0.9,1.7-0.9,2.9
c0,1.2,0.3,2.1,0.9,2.8c0.6,0.7,1.3,1.1,2.3,1.1c0.6,0,1.1-0.1,1.5-0.3c0.4-0.2,0.7-0.6,1-1v0.6c0,0.9-0.2,1.5-0.6,2
c-0.4,0.4-1,0.6-1.9,0.6c-0.4,0-0.7,0-1.1-0.1s-0.7-0.2-1.1-0.4v1.2c0.4,0.1,0.8,0.2,1.1,0.3c0.4,0.1,0.8,0.1,1.3,0.1
c1.2,0,2.1-0.3,2.7-1c0.6-0.6,0.9-1.6,0.9-2.9V40.6L113.2,40.6z"/>
<path d="M10.1,23.7c-0.4-0.1-0.8-0.1-1.3-0.1c-0.9,0-1.7,0.2-2.2,0.6c-0.5,0.4-0.8,0.9-0.8,1.7c0,0.6,0.2,1.1,0.5,1.4
C6.7,27.6,7.2,27.8,8,28l0.4,0.1c0.8,0.2,1.3,0.3,1.5,0.5c0.2,0.2,0.3,0.4,0.3,0.8c0,0.4-0.2,0.7-0.5,0.9c-0.3,0.2-0.8,0.3-1.4,0.3
c-0.4,0-0.9-0.1-1.3-0.2c-0.5-0.1-0.9-0.3-1.4-0.5v1.3c0.5,0.2,1,0.3,1.4,0.4c0.4,0.1,0.9,0.1,1.3,0.1c1,0,1.8-0.2,2.3-0.6
c0.6-0.4,0.8-1,0.8-1.7c0-0.6-0.2-1.1-0.6-1.5c-0.4-0.3-1-0.6-1.9-0.8L8.7,27c-0.7-0.2-1.1-0.3-1.3-0.5C7.1,26.3,7,26.1,7,25.8
c0-0.4,0.2-0.7,0.5-0.9c0.3-0.2,0.8-0.3,1.4-0.3c0.4,0,0.8,0,1.2,0.1c0.4,0.1,0.8,0.2,1.1,0.4V24C10.9,23.9,10.5,23.8,10.1,23.7
L10.1,23.7z M13.6,31.4h1.3v-7.7h-1.3V31.4L13.6,31.4z M13.6,22.4h1.3v-1.6h-1.3V22.4L13.6,22.4z M17.5,21.6v2.2h-0.9v1h0.9v4.2
c0,1,0.2,1.6,0.6,2c0.4,0.4,1,0.5,2,0.5h1.3v-1.1H20c-0.5,0-0.9-0.1-1-0.3c-0.2-0.2-0.3-0.6-0.3-1.2v-4.2h2.6v-1h-2.6v-2.2H17.5
L17.5,21.6z M58.9,27.6v0.3c0,0.8-0.2,1.5-0.6,2c-0.4,0.5-1,0.7-1.7,0.7c-0.5,0-0.9-0.1-1.2-0.4c-0.3-0.3-0.4-0.6-0.4-1.1
c0-0.6,0.2-1,0.6-1.2c0.4-0.2,1.1-0.3,2.1-0.3H58.9L58.9,27.6z M59.3,24.5c-0.5-0.6-1.4-0.9-2.5-0.9c-0.4,0-0.8,0-1.3,0.1
c-0.4,0.1-0.9,0.2-1.3,0.4v1.2c0.4-0.2,0.8-0.4,1.2-0.5c0.4-0.1,0.8-0.2,1.3-0.2c0.7,0,1.2,0.2,1.6,0.5c0.4,0.3,0.6,0.8,0.6,1.3
v0.1h-1.8c-1.1,0-2,0.2-2.6,0.7c-0.6,0.4-0.9,1.1-0.9,1.9c0,0.7,0.2,1.3,0.7,1.8c0.5,0.4,1.1,0.7,1.9,0.7c0.6,0,1.1-0.1,1.6-0.3
c0.4-0.2,0.8-0.6,1.1-1v1.2h1.3v-4.4C60.1,25.9,59.9,25,59.3,24.5L59.3,24.5z M67.8,24c-0.4-0.3-0.9-0.4-1.4-0.4
c-0.6,0-1,0.1-1.4,0.3c-0.4,0.2-0.7,0.6-1,1v-1.2h-1.3v7.7h1.3v-4.3c0-0.7,0.2-1.3,0.6-1.8c0.4-0.4,0.9-0.7,1.5-0.7
c0.5,0,0.9,0.2,1.2,0.5c0.3,0.4,0.4,0.9,0.4,1.6v4.6h1.3v-4.3c0-0.7,0.2-1.3,0.6-1.8c0.4-0.4,0.9-0.6,1.5-0.6
c0.5,0,0.9,0.2,1.2,0.5c0.3,0.4,0.4,0.9,0.4,1.6v4.6h1.3v-4.6c0-1-0.2-1.8-0.6-2.4c-0.4-0.6-1-0.8-1.8-0.8c-0.6,0-1.1,0.1-1.5,0.4
c-0.4,0.3-0.8,0.7-1.1,1.3C68.5,24.7,68.2,24.3,67.8,24L67.8,24z M82,24.6c-0.6-0.7-1.4-1-2.4-1c-1.1,0-2.1,0.4-2.7,1.1
c-0.7,0.7-1,1.7-1,3c0,1.2,0.4,2.2,1.1,2.9c0.7,0.7,1.7,1.1,2.9,1.1c0.5,0,1-0.1,1.4-0.2c0.5-0.1,0.9-0.2,1.4-0.4v-1.2
c-0.4,0.2-0.9,0.4-1.4,0.5c-0.5,0.1-0.9,0.2-1.4,0.2c-0.8,0-1.5-0.2-2-0.7c-0.5-0.5-0.7-1.1-0.8-2h5.8v-0.6
C82.9,26.2,82.6,25.3,82,24.6L82,24.6z M77.2,26.9c0.1-0.7,0.3-1.3,0.7-1.7c0.4-0.4,1-0.6,1.7-0.6c0.6,0,1.1,0.2,1.5,0.6
c0.4,0.4,0.6,1,0.6,1.6L77.2,26.9L77.2,26.9z M85,21.6v2.2H84v1H85v4.2c0,1,0.2,1.6,0.6,2c0.4,0.4,1,0.5,2,0.5h1.3v-1.1h-1.3
c-0.5,0-0.9-0.1-1-0.3c-0.2-0.2-0.3-0.6-0.3-1.2v-4.2h2.6v-1h-2.6v-2.2H85L85,21.6z M90.8,30.9l-0.6,2.2h0.9l1.1-2.2v-1.2h-1.4
V30.9L90.8,30.9z M103.8,23.7c-0.4-0.1-0.7-0.1-1.1-0.1c-1.2,0-2.1,0.4-2.8,1.1c-0.7,0.7-1,1.7-1,2.9c0,1.2,0.3,2.2,1,2.9
c0.7,0.7,1.6,1.1,2.7,1.1c0.4,0,0.8,0,1.2-0.1c0.4-0.1,0.7-0.2,1.1-0.4V30c-0.4,0.2-0.7,0.3-1.1,0.4c-0.4,0.1-0.7,0.1-1.1,0.1
c-0.8,0-1.4-0.3-1.9-0.8c-0.5-0.5-0.7-1.2-0.7-2.2c0-0.9,0.2-1.7,0.7-2.2c0.5-0.5,1.1-0.8,1.9-0.8c0.4,0,0.7,0,1.1,0.1
c0.4,0.1,0.7,0.2,1.1,0.4v-1.2C104.5,23.9,104.2,23.8,103.8,23.7L103.8,23.7z M111.6,25.5c0.4,0.5,0.6,1.2,0.6,2.2
c0,0.9-0.2,1.6-0.6,2.2c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.2-0.6-2.2c0-0.9,0.2-1.6,0.6-2.2
c0.4-0.5,0.9-0.8,1.6-0.8C110.7,24.7,111.2,24.9,111.6,25.5L111.6,25.5z M107.4,24.7c-0.6,0.7-0.9,1.7-0.9,3c0,1.3,0.3,2.2,0.9,2.9
c0.6,0.7,1.5,1.1,2.6,1.1c1.1,0,2-0.4,2.6-1.1c0.6-0.7,0.9-1.7,0.9-2.9c0-1.3-0.3-2.2-0.9-3c-0.6-0.7-1.5-1.1-2.6-1.1
C108.9,23.6,108.1,24,107.4,24.7L107.4,24.7z M121.3,24.4c-0.5-0.5-1.1-0.8-2-0.8c-0.5,0-1,0.1-1.4,0.3c-0.4,0.2-0.8,0.6-1.1,1
v-1.2h-1.3v7.7h1.3v-4.3c0-0.7,0.2-1.3,0.6-1.8c0.4-0.4,0.9-0.6,1.6-0.6c0.6,0,1,0.2,1.3,0.5c0.3,0.4,0.4,0.9,0.4,1.6v4.6h1.3v-4.6
C122,25.8,121.8,25,121.3,24.4L121.3,24.4z M128.2,23.7c-0.4-0.1-0.8-0.1-1.3-0.1c-0.9,0-1.7,0.2-2.2,0.6c-0.5,0.4-0.8,0.9-0.8,1.7
c0,0.6,0.2,1.1,0.5,1.4c0.3,0.3,0.9,0.6,1.7,0.8l0.4,0.1c0.8,0.2,1.3,0.3,1.5,0.5c0.2,0.2,0.3,0.4,0.3,0.8c0,0.4-0.2,0.7-0.5,0.9
c-0.3,0.2-0.8,0.3-1.4,0.3c-0.4,0-0.9-0.1-1.3-0.2c-0.5-0.1-0.9-0.3-1.4-0.5v1.3c0.5,0.2,1,0.3,1.4,0.4c0.4,0.1,0.9,0.1,1.3,0.1
c1,0,1.8-0.2,2.3-0.6c0.6-0.4,0.8-1,0.8-1.7c0-0.6-0.2-1.1-0.6-1.5c-0.4-0.3-1-0.6-1.9-0.8l-0.4-0.1c-0.7-0.2-1.1-0.3-1.3-0.5
c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.4,0.2-0.7,0.5-0.9c0.3-0.2,0.8-0.3,1.4-0.3c0.4,0,0.8,0,1.2,0.1c0.4,0.1,0.8,0.2,1.1,0.4V24
C129,23.9,128.7,23.8,128.2,23.7L128.2,23.7z M137.4,24.6c-0.6-0.7-1.4-1-2.4-1c-1.1,0-2.1,0.4-2.7,1.1c-0.7,0.7-1,1.7-1,3
c0,1.2,0.4,2.2,1.1,2.9c0.7,0.7,1.7,1.1,2.9,1.1c0.5,0,1-0.1,1.4-0.2c0.5-0.1,0.9-0.2,1.4-0.4v-1.2c-0.4,0.2-0.9,0.4-1.4,0.5
c-0.5,0.1-0.9,0.2-1.4,0.2c-0.8,0-1.5-0.2-2-0.7c-0.5-0.5-0.7-1.1-0.8-2h5.8v-0.6C138.3,26.2,138,25.3,137.4,24.6L137.4,24.6z
M132.6,26.9c0.1-0.7,0.3-1.3,0.7-1.7c0.4-0.4,1-0.6,1.7-0.6c0.6,0,1.1,0.2,1.5,0.6c0.4,0.4,0.6,1,0.6,1.6L132.6,26.9L132.6,26.9z
M144.8,23.7c-0.4-0.1-0.7-0.1-1.1-0.1c-1.2,0-2.1,0.4-2.8,1.1c-0.7,0.7-1,1.7-1,2.9c0,1.2,0.3,2.2,1,2.9c0.7,0.7,1.6,1.1,2.7,1.1
c0.4,0,0.8,0,1.2-0.1c0.4-0.1,0.7-0.2,1.1-0.4V30c-0.4,0.2-0.7,0.3-1.1,0.4c-0.4,0.1-0.7,0.1-1.1,0.1c-0.8,0-1.4-0.3-1.9-0.8
c-0.5-0.5-0.7-1.2-0.7-2.2c0-0.9,0.2-1.7,0.7-2.2c0.5-0.5,1.1-0.8,1.9-0.8c0.4,0,0.7,0,1.1,0.1c0.4,0.1,0.7,0.2,1.1,0.4v-1.2
C145.6,23.9,145.2,23.8,144.8,23.7L144.8,23.7z M147.5,28.2h3.7V27h-3.7V28.2L147.5,28.2z"/>
<path d="M6.4,14.6h6.4v-1.2h-5v-9H6.4V14.6L6.4,14.6z M18.7,8.7c0.4,0.5,0.6,1.2,0.6,2.2c0,0.9-0.2,1.6-0.6,2.2
c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.2-0.6-2.2c0-0.9,0.2-1.6,0.6-2.2c0.4-0.5,0.9-0.8,1.6-0.8
C17.8,7.9,18.3,8.1,18.7,8.7L18.7,8.7z M14.5,7.9c-0.6,0.7-0.9,1.7-0.9,3c0,1.3,0.3,2.2,0.9,2.9c0.6,0.7,1.5,1.1,2.6,1.1
c1.1,0,2-0.4,2.6-1.1c0.6-0.7,0.9-1.7,0.9-2.9c0-1.3-0.3-2.2-0.9-3c-0.6-0.7-1.5-1.1-2.6-1.1C16,6.8,15.1,7.2,14.5,7.9L14.5,7.9z
M27.1,6.9c-0.1,0-0.2,0-0.3-0.1c-0.1,0-0.2,0-0.3,0c-0.6,0-1.1,0.1-1.5,0.3s-0.8,0.6-1,1V7h-1.3v7.7h1.3v-4c0-0.9,0.2-1.5,0.6-2
c0.4-0.5,0.9-0.7,1.6-0.7c0.2,0,0.4,0,0.6,0.1c0.2,0,0.3,0.1,0.5,0.2L27.1,6.9L27.1,6.9z M34.1,7.8c-0.6-0.7-1.4-1-2.4-1
c-1.1,0-2.1,0.4-2.7,1.1c-0.7,0.7-1,1.7-1,3c0,1.2,0.4,2.2,1.1,2.9c0.7,0.7,1.7,1.1,2.9,1.1c0.5,0,1-0.1,1.4-0.2
c0.5-0.1,0.9-0.2,1.4-0.4v-1.2c-0.4,0.2-0.9,0.4-1.4,0.5c-0.5,0.1-0.9,0.2-1.4,0.2c-0.8,0-1.5-0.2-2-0.7c-0.5-0.5-0.7-1.1-0.8-2H35
v-0.6C35,9.4,34.7,8.5,34.1,7.8L34.1,7.8z M29.2,10.1c0.1-0.7,0.3-1.3,0.7-1.7c0.4-0.4,1-0.6,1.7-0.6c0.6,0,1.1,0.2,1.5,0.6
c0.4,0.4,0.6,1,0.6,1.6L29.2,10.1L29.2,10.1z M42.1,7.2c-0.4-0.3-0.9-0.4-1.4-0.4c-0.6,0-1,0.1-1.4,0.3c-0.4,0.2-0.7,0.6-1,1V7H37
v7.7h1.3v-4.3c0-0.7,0.2-1.3,0.6-1.8c0.4-0.4,0.9-0.7,1.5-0.7c0.5,0,0.9,0.2,1.2,0.5c0.3,0.4,0.4,0.9,0.4,1.6v4.6h1.3v-4.3
c0-0.7,0.2-1.3,0.6-1.8c0.4-0.4,0.9-0.6,1.5-0.6c0.5,0,0.9,0.2,1.2,0.5c0.3,0.4,0.4,0.9,0.4,1.6v4.6h1.3V10c0-1-0.2-1.8-0.6-2.4
c-0.4-0.6-1-0.8-1.8-0.8c-0.6,0-1.1,0.1-1.5,0.4c-0.4,0.3-0.8,0.7-1.1,1.3C42.8,7.9,42.5,7.5,42.1,7.2L42.1,7.2z M55.1,14.6h1.3V7
h-1.3V14.6L55.1,14.6z M55.1,5.6h1.3V4h-1.3V5.6L55.1,5.6z M61.2,14.5c0.4,0.2,0.9,0.3,1.4,0.3c0.9,0,1.7-0.4,2.3-1.1
c0.6-0.7,0.9-1.7,0.9-2.9c0-1.2-0.3-2.2-0.9-2.9c-0.6-0.7-1.3-1.1-2.3-1.1c-0.6,0-1,0.1-1.4,0.3c-0.4,0.2-0.7,0.6-1,1V7H59v10.6
h1.3v-4.1C60.5,13.9,60.8,14.3,61.2,14.5L61.2,14.5z M64,13c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8
c-0.4-0.5-0.6-1.3-0.6-2.2c0-0.9,0.2-1.7,0.6-2.2c0.4-0.5,0.9-0.8,1.6-0.8c0.7,0,1.2,0.3,1.6,0.8c0.4,0.5,0.6,1.3,0.6,2.2
C64.5,11.7,64.3,12.5,64,13L64,13z M71.7,6.9c-0.4-0.1-0.8-0.1-1.3-0.1c-0.9,0-1.7,0.2-2.2,0.6c-0.5,0.4-0.8,0.9-0.8,1.7
c0,0.6,0.2,1.1,0.5,1.4c0.3,0.3,0.9,0.6,1.7,0.8l0.4,0.1c0.8,0.2,1.3,0.3,1.5,0.5c0.2,0.2,0.3,0.4,0.3,0.8c0,0.4-0.2,0.7-0.5,0.9
c-0.3,0.2-0.8,0.3-1.4,0.3c-0.4,0-0.9-0.1-1.3-0.2c-0.5-0.1-0.9-0.3-1.4-0.5v1.3c0.5,0.2,1,0.3,1.4,0.4c0.4,0.1,0.9,0.1,1.3,0.1
c1,0,1.8-0.2,2.3-0.6c0.6-0.4,0.8-1,0.8-1.7c0-0.6-0.2-1.1-0.6-1.5c-0.4-0.3-1-0.6-1.9-0.8l-0.4-0.1C69.6,10,69.2,9.9,69,9.7
c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.4,0.2-0.7,0.5-0.9c0.3-0.2,0.8-0.3,1.4-0.3c0.4,0,0.8,0,1.2,0.1c0.4,0.1,0.8,0.2,1.1,0.4V7.2
C72.5,7.1,72.1,7,71.7,6.9L71.7,6.9z M75.8,14c0.5,0.5,1.1,0.8,2,0.8c0.5,0,1-0.1,1.4-0.3c0.4-0.2,0.8-0.6,1.1-1v1.2h1.3V7h-1.3
v4.3c0,0.7-0.2,1.3-0.6,1.8c-0.4,0.4-0.9,0.6-1.6,0.6c-0.6,0-1-0.2-1.3-0.5c-0.3-0.4-0.4-0.9-0.4-1.6V7h-1.3v4.6
C75.1,12.7,75.3,13.5,75.8,14L75.8,14z M89.2,7.2c-0.4-0.3-0.9-0.4-1.4-0.4c-0.6,0-1,0.1-1.4,0.3c-0.4,0.2-0.7,0.6-1,1V7H84v7.7
h1.3v-4.3c0-0.7,0.2-1.3,0.6-1.8c0.4-0.4,0.9-0.7,1.5-0.7c0.5,0,0.9,0.2,1.2,0.5c0.3,0.4,0.4,0.9,0.4,1.6v4.6h1.3v-4.3
c0-0.7,0.2-1.3,0.6-1.8c0.4-0.4,0.9-0.6,1.5-0.6c0.5,0,0.9,0.2,1.2,0.5c0.3,0.4,0.4,0.9,0.4,1.6v4.6h1.3V10c0-1-0.2-1.8-0.6-2.4
c-0.4-0.6-1-0.8-1.8-0.8c-0.6,0-1.1,0.1-1.5,0.4c-0.4,0.3-0.8,0.7-1.1,1.3C89.9,7.9,89.6,7.5,89.2,7.2L89.2,7.2z M124,7.1
c-0.4-0.2-0.9-0.3-1.5-0.3c-0.9,0-1.7,0.4-2.3,1.1c-0.6,0.7-0.9,1.7-0.9,2.9c0,1.2,0.3,2.2,0.9,2.9c0.6,0.7,1.3,1.1,2.3,1.1
c0.6,0,1-0.1,1.5-0.3c0.4-0.2,0.7-0.6,1-1v1.1h1.3V4H125v4.1C124.7,7.7,124.4,7.3,124,7.1L124,7.1z M121.3,8.6
c0.4-0.5,0.9-0.8,1.6-0.8c0.7,0,1.2,0.3,1.6,0.8c0.4,0.5,0.6,1.3,0.6,2.2c0,0.9-0.2,1.7-0.6,2.2c-0.4,0.5-0.9,0.8-1.6,0.8
c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.3-0.6-2.2C120.7,9.9,120.9,9.2,121.3,8.6L121.3,8.6z M133.4,8.7c0.4,0.5,0.6,1.2,0.6,2.2
c0,0.9-0.2,1.6-0.6,2.2c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.2-0.6-2.2c0-0.9,0.2-1.6,0.6-2.2
c0.4-0.5,0.9-0.8,1.6-0.8C132.5,7.9,133,8.1,133.4,8.7L133.4,8.7z M129.2,7.9c-0.6,0.7-0.9,1.7-0.9,3c0,1.3,0.3,2.2,0.9,2.9
c0.6,0.7,1.5,1.1,2.6,1.1c1.1,0,2-0.4,2.6-1.1c0.6-0.7,0.9-1.7,0.9-2.9c0-1.3-0.3-2.2-0.9-3c-0.6-0.7-1.5-1.1-2.6-1.1
C130.7,6.8,129.9,7.2,129.2,7.9L129.2,7.9z M137.4,14.6h1.3V4h-1.3V14.6L137.4,14.6z M145.9,8.7c0.4,0.5,0.6,1.2,0.6,2.2
c0,0.9-0.2,1.6-0.6,2.2c-0.4,0.5-0.9,0.8-1.6,0.8c-0.7,0-1.2-0.3-1.6-0.8c-0.4-0.5-0.6-1.2-0.6-2.2c0-0.9,0.2-1.6,0.6-2.2
c0.4-0.5,0.9-0.8,1.6-0.8C145,7.9,145.5,8.1,145.9,8.7L145.9,8.7z M141.7,7.9c-0.6,0.7-0.9,1.7-0.9,3c0,1.3,0.3,2.2,0.9,2.9
c0.6,0.7,1.5,1.1,2.6,1.1c1.1,0,2-0.4,2.6-1.1c0.6-0.7,0.9-1.7,0.9-2.9c0-1.3-0.3-2.2-0.9-3c-0.6-0.7-1.5-1.1-2.6-1.1
C143.2,6.8,142.3,7.2,141.7,7.9L141.7,7.9z M154.3,6.9c-0.1,0-0.2,0-0.3-0.1c-0.1,0-0.2,0-0.3,0c-0.6,0-1.1,0.1-1.5,0.3
c-0.4,0.2-0.8,0.6-1,1V7h-1.3v7.7h1.3v-4c0-0.9,0.2-1.5,0.6-2c0.4-0.5,0.9-0.7,1.6-0.7c0.2,0,0.4,0,0.6,0.1c0.2,0,0.3,0.1,0.5,0.2
L154.3,6.9L154.3,6.9z"/>
</g>
</svg>
</div>
Ладно, добавлю ещё одно решение поизящнее чем первоначальное, поскольку, как я и говорил вначале "вопросы с подвохами", и этот как раз один из таких.
Разумеется я не стану решать за вас всю задачу, но покажу куда двигаться. Начнём с того, что SVG
, как впрочем и canvas
имеют массу возможностей. И если со вторым всё сразу понятно — javascript в зубы и вперёд, то первый часто недооценивают из-за незнания возможностей или из-за страха необходимости решать сложные задачи при помощи всё того же программирования. А ваша задача по другому сама не решится. Так что, если вам нужно, чтобы сделали это за вас, то... вам не на этот сайт.
Впрочем к делу. Вот вам решение, которое осталось допрограммировать путём того, чтобы измерять потенциальную длину текста в строке, резать строки для переносов и резать каждую отдельно взятую строку при необходимости маски-вставки и добавлять их (маски) соответствующей длины.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90">
<style>
foreignObject {
aspect-ratio: 16 / 9;
font-size: 1rem;
}
video {
width: 100%;
}
text {
font-weight: bold;
fill: #d4d4d4;
}
.back {
fill: #252525;
}
.erectio [fill="black"] {
height: .5rem;
}
</style>
<foreignObject x="0" y="0" width="100%" height="100%" >
<video autoplay="" loop="" muted="" playsinline="" src="https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4" type="video/mp4"></video>
</foreignObject>
<mask id="myMask" class="erectio">
<rect x="0" y="0" width="160" height="90" fill="white" />
<rect x="96" y="8" width="22" fill="black" />
<rect x="144" y="30" width="14" fill="black" />
</mask>
<rect class="back" x="0" y="0" width="160" height="90" mask="url(#myMask)" />
<text>
<tspan x="2" y="16">Lorem ipsum</tspan><tspan x="120" y="16">dolor</tspan>
<tspan x="2" y="38">sit amet, consectetur</tspan>
<tspan x="2" y="60">adipiscing elit, sed</tspan>
<tspan x="2" y="81">do eiusmod tempor...</tspan>
</text>
<script>//<![CDATA[
function textWidth(text) {
const txt = document.querySelector('svg text');
return txt.clientWidth;
}
let width = textWidth('');
console.log(width);
//]]></script>
</svg>
P.S. надеюсь этого достаточно для понимания того что вам так или иначе предстоит поработать головой и немало?