Wie kann ich SVG-Schnittmasken erstellen?

Ich möchte einen Kreis nehmen, der einen blauen Rand und ein Bild darin hat, und das Bild so zuschneiden, dass es gut in den Kreis passt. Ich würde es vorziehen, sehr kleine Dateien zu verwenden, vielleicht in Sprites gekürzt.

Sobald ich die Schnittmaske habe (ähnlich wie Photoshop), möchte ich ihr eine Hover-CSS-Animation hinzufügen.

Hallo und willkommen bei GD. Bitte geben Sie Beispiele für das gewünschte Ergebnis an. Sprechen Sie davon, SVG im Web zu generieren oder nur Illustrator zu verwenden und Bilder mit Bildern und Text zu erstellen? (Wenn Sie Bilder von Beispielen und dem, was Sie ausprobiert haben, hochladen, wird jemand mit genügend Repräsentanten diese für Sie zu Ihrem Beitrag hinzufügen).

Antworten (4)

Ich habe die Antwort auf meine eigene Frage gefunden.

Hier ist ein Tutorial zu diesem Thema von coderwall.com . Es ist erstaunlich und diese Art von Styling und grafischer Arbeit ist genau das, worüber ich spreche. Sie können reichhaltige Hover und Animationen erstellen, die superleicht sind.

Hier ist ihr Beispiel

Die technischen Teile dessen, was vor sich geht, sind:

  • Mit SVGs können wir einen Beschneidungspfad hinzufügen, um die Form unserer Bilder zu ändern.

  • Es verwendet das SVG-Element, um SVG-Formen zu gruppieren.

Weitere Referenzen:

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

Schön, dass Sie die Lösung gefunden haben.
Ich habe Ihre Links aus praktischen Gründen zu Ihrer Antwort hinzugefügt. Sie können auch Ihre eigene Antwort als Lösung übernehmen: Klicken Sie dazu auf das grüne Häkchen. Es ist gut für zukünftige Referenzen.

Ich bin mir nicht sicher, ob ich deine Frage ganz verstehe, aber ich werde es wagen.

Soweit ich weiß, möchten Sie Kreise mit Bildern (kreisförmige Bilder) auf einer Webseite. Der einfachste Weg, dies zu erreichen, besteht darin, die Bilder, die div-Container für das Bild, einfach zu stylen. Hier ist das CSS, um einfach einen Kreis zu machen:

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

Dies wird Ihnen Folgendes geben:

Geben Sie hier die Bildbeschreibung ein

Dann können Sie ein Hintergrundbild hinzufügen, indem Sie Folgendes hinzufügen:

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

Dies wird Ihnen Folgendes geben:

Geben Sie hier die Bildbeschreibung ein

Für einen Hover-Effekt können Sie ein weiteres Div erstellen, um das vorherige zu umschließen:

.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;
}

Um den gesamten Code einschließlich des Hover-Effekts zu sehen, siehe diese JSfiddle

Ich weiß schon, wie das geht. Ich suche nach einem Clipping-Szenario.
Wow, ich habe es gefunden, wonach ich gesucht habe, und es ist großartig !!! Ich werde die Antwort posten und das Beispiel zeigen.

Es ist nicht nur möglich, sondern auch weit verbreitet. SVG wird auf vielen Websites für alle Arten von Symbolen verwendet, einschließlich Schriftsymbolen. Für viele meiner Kunden verwenden wir es für das Menü "Hamburger", Facebook- und Twitter-Symbole.

Googlen Sie dazu und Sie werden eine Vielzahl von Anwendungsbeispielen finden. Wenn Sie den Code für einfache Dinge studieren möchten, können Sie sie mit einem beliebigen einfachen Editor erstellen.

Danke, ich habe meine Frage aktualisiert, damit es ein wenig klarer ist, was ich zu erreichen versuche.

Nicht jeder Browser unterstützt svg, und es gibt auch Unterschiede zwischen on und other.

Fragen Sie sich zunächst, ob sich der Mehraufwand an Arbeit und Problemen lohnt. Dann überprüfe das:

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

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

Grüße

Ich habe mir diese beiden Ressourcen angesehen und in der Sandbox herumgespielt. Aber nicht das Beispiel dessen, was ich frage. so sagen vielleicht werde ich meine Erklärung ein wenig aufräumen. Danke die Antwort war hilfreich
Hallo Mac. Wir versuchen, keine Link-=Only-Antworten auf der Website zu haben, da Websites ausfallen oder Adressen ändern können. Können Sie in Ihrer Antwort erklären, was diese Links sagen?
Wie kann ich SVG-Schnittmasken erstellen?
AntwortenHierDatenschutz-Bestimmungen1y, 0v