Как создать обтравочные маски SVG?

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

Когда у меня есть обтравочная маска (что-то вроде Photoshop), я хочу добавить к ней анимацию hover css.

Привет и добро пожаловать в GD. Приведите примеры желаемого результата. Вы говорите о создании svg в Интернете или об использовании только иллюстратора, создании изображений с фотографиями и текстом? (если вы загрузите изображения примеров и того, что вы пробовали, кто-то с достаточной репутацией добавит их в ваш пост для вас).

Ответы (4)

Я нашел ответ на свой вопрос.

Вот туториал на эту тему от coderwall.com . Это потрясающе, и именно такой стиль и графическая работа — это то, о чем я говорю. Вы можете делать богатые зависания и анимацию, которые очень легки.

Вот их пример

Технические части происходящего таковы:

  • С помощью SVG мы можем добавить обтравочный контур, чтобы изменить форму наших изображений.

  • Он использует элемент SVG, который используется для группировки фигур SVG.

Больше ссылок:

www.web-expert.it/summer-lab/summer-lab.html

www.tutorials.jenkov.com/svg/g-element.html

www.tutorials.jenkov.com/svg/text-element.html#text-example

tutorials.jenkov.com/svg/clip-path.html

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

Я не уверен, что полностью понял ваш вопрос, но я рискну.

Насколько я понимаю, вам нужны круги с изображениями (круглые изображения) на веб-странице. Самый простой способ добиться этого — просто стилизовать изображения, контейнеры div для изображения. Вот css для простого создания круга:

   .circle {
        width: 120px;
        height: 120px;
        border: 5px solid red;
        -moz-border-radius: 60px;
        -webkit-border-radius: 60px;
        border-radius: 60px;
    }

Это даст вам следующее:

введите описание изображения здесь

Затем вы можете добавить к этому фоновое изображение, добавив:

background-image:url('http://i.stack.imgur.com/UEJFV.gif?s=128&g=1?s=128&g=1');
background-position:center;

Это даст вам следующее:

введите описание изображения здесь

Для эффекта наведения вы можете сделать еще один div, чтобы обернуть предыдущий:

.fade {
float: left;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
    opacity: 0.5;
}

Чтобы увидеть весь код, включая эффект наведения, см. этот JSfiddle

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

Это не только возможно, но и широко используется. SVG используется для всех видов символов на многих сайтах, включая значки шрифтов. Для многих моих клиентов мы используем его для меню «гамбургер», значков facebook и twitter.

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

Спасибо, я обновил свой вопрос, чтобы стало немного понятнее, чего я пытаюсь достичь.

Не каждый браузер поддерживает svg, да и между on и other есть отличия.

Сначала спросите себя, стоит ли дополнительный объем работы и проблем. Затем проверьте это:

http://www.w3schools.com/svg/svg_examples.asp

http://css-tricks.com/using-svg/

С Уважением

Я просмотрел оба этих ресурса и поиграл в песочнице. Но не пример того, что я прошу. так скажите, возможно, я немного поправлю свое объяснение. Спасибо ответ был полезен
Привет Мак. Мы стараемся, чтобы на сайте не было ответов, состоящих только из ссылок, потому что веб-сайты могут отключаться или менять адреса. Не могли бы вы объяснить в своем ответе, что говорят эти ссылки?
Как создать обтравочные маски SVG?
СпросиСетьПолитика конфиденциальности1y, 0v