@Adexs

Как задать 100% размер svg через use xlink:href=""?

Обнаружил, что через use xlink:href="" svg вставляется в своем первозданном размере, в то время как через img и object/embed изображение полностью заполняет контейнер. Что сделать, чтобы через use xlink масштабирование так же работало? Вариации с указанием размеров в 100% не помогли (работает только при указанной высоте блока).
Так же, если вставлять через тег svg без use xlink:href - изображение масштабируется нормально.
  • Вопрос задан
  • 688 просмотров
Пригласить эксперта
Ответы на вопрос 1
LenovoId
@LenovoId Куратор тега SVG
svg, css,js
Разумеется мой прошлый пример был 100% шляпой , я подумал и доработал ... до идеальности , смотрите

<svg id="my" width="500" height="300" viewbox=" 0 0 500 300" preserveAspectRatio="none"  xmlns="http://www.w3.org/2000/svg">
       <defs>
        <pattern id="pattern" width="200" height="200"
           patternUnits="userSpaceOnUse">
    <image id="fon1" xlink:href="http://colourlovers.com.s3.amazonaws.com/images/patterns/2974/2974892.png" x="0" y="0" />
  </pattern>
        </defs>
     <polygon id="myFill" points="0,0 0,300 500,300 500,0" />
  </svg>


*{
  margin:0;
  padding:0;
}
html,body{
  height:100%;
}
#my{
  display:block;
  width:100%;
  height:100%;
}
#myFill{
  fill:url(#pattern);
}

ссылка на песочницу : https://codepen.io/simkaUser/pen/XeNWBK?editors=1100
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы