3

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

создаю svg файл таким образом:

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     width="600" height="600">
<style type="text/css" media="screen">
    #a {
        background: url('img.jpg') top repeat;
    }
</style>
<rect id="a" x="-0.5" y="0.5" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="600" height="600"/>
</svg>
4
  • Как для обычного dom-элемента - background.
    – Qwertiy
    7 авг 2015 в 19:38
  • например background-color не работает вместо него используется fill.. background: url('...') тоже работать не хочет...
    – nup
    7 авг 2015 в 19:45
  • svg-стили или css-стили?
    – Qwertiy
    7 авг 2015 в 20:34
  • Для нормального css ответил. Background-color тоже в таком варианте работает.
    – Qwertiy
    7 авг 2015 в 20:37

2 ответа 2

4

svg {
  background: url(https://www.gravatar.com/avatar/9bd620150717350f66401d7f9590a8b2?s=32&d=identicon&r=PG) repeat;
}
<svg height="204" width="204">
  <circle cx="102" cy="102" r="100" stroke="black" stroke-width="3" fill="transparent" />
</svg>

3
  • а стиль в вашем примере написан во внешнем css файле? хочется узнать как такой фон использовать во встроенном css. в вопросе добавил код как я создаю svg и стили.
    – nup
    7 авг 2015 в 20:58
  • @doomek, не был, а появился ;)
    – Qwertiy
    7 авг 2015 в 21:04
  • Да, в моём примере стиль принадлежит html-разметке, а не svg.
    – Qwertiy
    7 авг 2015 в 21:06
2

Вот вариант с двумя фоновыми текстурами. Одна задана внутри svg, вторая применяется при наведении мыши из внешнего css. Обе текстуры определены внутри svg.

circle:hover {
  fill: url(#bgh);
}
<svg height="204" width="204">
  <defs>
    <pattern id="bg" x="0" y="0" patternUnits="userSpaceOnUse" height="32" width="32">
      <image x="0" y="0" width="32" height="32" xlink:href="https://www.gravatar.com/avatar/9bd620150717350f66401d7f9590a8b2?s=32&d=identicon&r=PG"></image>
    </pattern>
    <pattern id="bgh" x="0" y="0" patternUnits="userSpaceOnUse" height="32" width="32">
      <image x="0" y="0" width="32" height="32" xlink:href="https://www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=32&d=identicon&r=PG"></image>
    </pattern>
  </defs>
  <circle cx="102" cy="102" r="100" stroke="black" stroke-width="3" fill="url(#bg)" />
</svg>

1
  • спасибо за ответ , мне тоже помогло)
    – Profet
    1 апр 2018 в 15:21

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.