Как масштабировать SVG полигона с заливкой изображения до высоты контейнера? - PullRequest
Новая
       44

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

0 голосов
/ 26 марта 2019

Я бы хотел масштабировать SVG с многоугольной формой до полной высоты контейнера. Установка высоты SVG на 100% не будет работать.

Соответствует jsFiddle: https://jsfiddle.net/12yktprj/

Следующая строка вызывает у меня проблемы: 

aside svg {
    height: 100%; /* somehow not working */
    width: 100%;  /* somehow not working */
}

1 Ответ

0 голосов
/ 26 марта 2019

Элемент svg должен иметь атрибут viewBox, а не ширину и высоту.Для атрибута viewBox я беру размер многоугольника.

Также в этом случае (flex-direction:row - по умолчанию) вместо объявления width изгибаемых элементов я объявляю[flex свойство]

В стороне есть position:relative;, а svg имеет position:absolute; и переполняет aside.Я надеюсь, что это то, что вы спрашивали.

(https://developer.mozilla.org/en-US/docs/Web/CSS/flex)

*{padding:0,margin:0}
body {
  height: 300px;
  width: 900px;
  border: 3px solid green;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position:relative;
  background:#ddd;
}

aside {
  position:relative;
  flex: 1 1 25%;
  height: 100%;
  border: 1px solid blue;
}

aside svg {
  position:absolute;
  height:100%
}

article {
  border: 2px solid orange;
  flex: 1 1 75%;
  height: 100%;
  padding: 2px;
}
<body>
  <aside>
    <svg viewBox="0 0 100 100">
      <defs>
          <pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
              <image height="1" preserveAspectRatio="slice" xlink:href="https://i.imgur.com/8OtgM8B.jpg" />
          </pattern>
      </defs>
      <polygon fill="url(#pattern1)" points="0,0 70,0 100,100 0,100"/>
    </svg>
  </aside>
  <article>
    <h1>Title</h1>
    <p>Sample Text</p>
  </article>
</body>
...