png回転svg生成svg+xml

1196 ワード
css 3
pngピクチャをsvg+xmlに変換
data:image/svg+xml,
以下のmixinを用いて導入し,sassでコンパイルすればよい.
//  Function to create an optimized svg url
//  Version: 1.0.0
@function svg-url($svg){
    //
    //  Add missing namespace
    //
    @if not str-index($svg,xmlns) {
        $svg: str-replace($svg, '', '%3E');

        $encoded: #{$encoded}#{$chunk};
        $index: $index + $slice;
    }
    @return url("data:image/svg+xml,#{$encoded}");
}

//  Background svg mixin
@mixin background-svg($svg){
    background-image: svg-url($svg);
}

@mixin background-mask($svg){
    -webkit-mask: svg-url($svg);
}


//  Helper function to replace characters in a string
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @return if($index,
        str-slice($string, 1, $index - 1) + $replace +
        str-replace(str-slice($string, $index +
        str-length($search)), $search, $replace),
        $string);
}

Vue3でpropsの値をCSSに渡す際に注意したいこと
RegisterHotKeyのXPシステムでの動作の問題