suchen

Heim >Web-Frontend >H5-Tutorial >So erstellen Sie ein Symbol aus einem Symbol in SVG

So erstellen Sie ein Symbol aus einem Symbol in SVG

不言
不言Original
2018-08-08 11:15:082615Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Erstellung von Symbolen in SVG. Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

1. cnpm i gulp -g

2. Erstellen Sie eine neue gulpfile.js-Datei 

var gulp = require('gulp');
var svgSymbols = require('gulp-svg-symbols');
gulp.task('sprites',function(){
    return gulp.src('assets/svg/*.svg').pipe(svgSymbols()).pipe(gulp.dest('assets'));
})

3. Erstellen Sie ein neues Asset/SVG und fügen Sie es in die Datei ein SVG-Datei

Tipp: Ändern Sie den Namen der SVG-Datei in die erforderliche ID

4. Führen Sie gulp Sprites aus

5. Verwenden Sie 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .icon{
        width:32px;
        height:32px;
        fill:red;
    }
    </style>
</head>
<body>
    <svg class="icon">
        <use xlink:href="/assets/svg-symbols.svg#boat"></use>
    </svg>
</body>
</html>

direkt in HTML Artikelempfehlung:

SVG-Zeichenfunktion: SVG realisiert das Zeichnen einer Blume (mit Code)

Die Verwendung von ad68ae2ec39a8f78a87ebb67fa598c57-Elementen und Markern in SVG Einführung zu Attributen

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Symbol aus einem Symbol in SVG. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

gulp html JS symbol
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：SVG-Zeichenfunktion: SVG realisiert das Zeichnen einer Blume (mit Code)Nächster Artikel：SVG-Zeichenfunktion: SVG realisiert das Zeichnen einer Blume (mit Code)

In Verbindung stehende Artikel

Mehr sehen