在SVG中使用CSS变量实例演示：可定制的电子宠物小毛驴

Use CSS Variables in SVG

svg, css, var

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2347
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Oswald");
.horse {
    --color-body: #8d5000;
    --color-muzzle: #ffb380;
    --color-eyes: #ffffff;
    --color-teeth: #ffdd55;
    --color-hoofs: #784421;
}
.ugly {
    --color-body: lime;
    --color-muzzle: red;
    --color-eyes: hotpink;
    --color-teeth: cyan;
    --color-hoofs: blue;
}
.random-1 {
    --color-body: #c4e96e;
    --color-muzzle: #1e4344;
    --color-eyes: #4d8840;
    --color-teeth: #c4aea1;
    --color-hoofs: #95de99;
}
.random-2 {
    --color-body: #36fe85;
    --color-muzzle: #7b3d70;
    --color-eyes: #eda7e0;
    --color-teeth: #e74322;
    --color-hoofs: #64e180;
}
.random-3 {
    --color-body: #889e31;
    --color-muzzle: #51d884;
    --color-eyes: #f469aa;
    --color-teeth: #f59192;
    --color-hoofs: #634c11;
}
.random-4 {
    --color-body: #90ccf5;
    --color-muzzle: #81c137;
    --color-eyes: #b40240;
    --color-teeth: #e5eae3;
    --color-hoofs: #a1c91c;
}
.random-5 {
    --color-body: #f311cd;
    --color-muzzle: #45f193;
    --color-eyes: #a77ee0;
    --color-teeth: #267c0c;
    --color-hoofs: #6878a3;
}
.random-6 {
    --color-body: #2d7f22;
    --color-muzzle: #0673d2;
    --color-eyes: #3afafa;
    --color-teeth: #7d1e07;
    --color-hoofs: #39d0bd;
}
.random-7 {
    --color-body: #61859f;
    --color-muzzle: #83cfc3;
    --color-eyes: #ec29d3;
    --color-teeth: #f6e96f;
    --color-hoofs: #49651f;
}
.random-8 {
    --color-body: #bd38d4;
    --color-muzzle: #e267c5;
    --color-eyes: #fcc310;
    --color-teeth: #e6040b;
    --color-hoofs: #215451;
}
.random-9 {
    --color-body: #8f6ee2;
    --color-muzzle: #6fe67c;
    --color-eyes: #369dac;
    --color-teeth: #186a2b;
    --color-hoofs: #a95cda;
}
.random-10 {
    --color-body: #364701;
    --color-muzzle: #1d31a1;
    --color-eyes: #19d5ac;
    --color-teeth: #80fa0b;
    --color-hoofs: #c3a3e7;
}
.random-11 {
    --color-body: #a008c9;
    --color-muzzle: #f915ca;
    --color-eyes: #08b25e;
    --color-teeth: #70996d;
    --color-hoofs: #f237fc;
}
.random-12 {
    --color-body: #b01799;
    --color-muzzle: #54fd1e;
    --color-eyes: #806925;
    --color-teeth: #de144e;
    --color-hoofs: #1fb71a;
}
.random-13 {
    --color-body: #fa5bf2;
    --color-muzzle: #9ea524;
    --color-eyes: #d87c53;
    --color-teeth: #feb55c;
    --color-hoofs: #22ed13;
}
.random-14 {
    --color-body: #9c3cde;
    --color-muzzle: #9c2ed3;
    --color-eyes: #856780;
    --color-teeth: #9ddda3;
    --color-hoofs: #1d23ec;
}
.random-15 {
    --color-body: #aa6ea0;
    --color-muzzle: #256f98;
    --color-eyes: #20352d;
    --color-teeth: #816f32;
    --color-hoofs: #230ed0;
}
.random-16 {
    --color-body: #0c34c3;
    --color-muzzle: #1771c3;
    --color-eyes: #2e821e;
    --color-teeth: #bd4f9c;
    --color-hoofs: #b9d738;
}
.random-17 {
    --color-body: #365609;
    --color-muzzle: #8bbbee;
    --color-eyes: #8daa98;
    --color-teeth: #4df8a3;
    --color-hoofs: #56e5ec;
}
.random-18 {
    --color-body: #7b6f80;
    --color-muzzle: #d68993;
    --color-eyes: #35dd32;
    --color-teeth: #b904cc;
    --color-hoofs: #b4e0cb;
}
.random-19 {
    --color-body: #8b21a3;
    --color-muzzle: #a21d85;
    --color-eyes: #4f8e5d;
    --color-teeth: #6d1fe2;
    --color-hoofs: #6f7050;
}
.random-20 {
    --color-body: #4ccbaf;
    --color-muzzle: #6970ab;
    --color-eyes: #f9ff79;
    --color-teeth: #a16bce;
    --color-hoofs: #5d2030;
}
.random-21 {
    --color-body: #453641;
    --color-muzzle: #54994d;
    --color-eyes: #dbd20a;
    --color-teeth: #a3a918;
    --color-hoofs: #a06a7d;
}
.random-22 {
    --color-body: #492a62;
    --color-muzzle: #d58a76;
    --color-eyes: #165cc4;
    --color-teeth: #45d14e;
    --color-hoofs: #ef9bc9;
}
.random-23 {
    --color-body: #2bb691;
    --color-muzzle: #3042cc;
    --color-eyes: #d7ad09;
    --color-teeth: #8aeaeb;
    --color-hoofs: #16106d;
}
.random-24 {
    --color-body: #cb9141;
    --color-muzzle: #ce2be5;
    --color-eyes: #4832c5;
    --color-teeth: #3d979b;
    --color-hoofs: #cae3af;
}
html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
article {
    max-width: 60rem;
    margin: 0 auto;
    text-align: center;
}
h1,
h2 {
    width: 100%;
    font: 2rem 'Oswald', sans-serif;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    margin: 2rem 0 4rem;
}
.horse {
    width: 60%;
}
.ugly {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-item-align: center;
    align-self: center;
    height: 2rem;
    position: relative;
}
fieldset {
    border: 0;
    padding: 3rem;
}
label {
    font: caption;
    display: inline-block;
}
input {
    outline: 0;
    box-sizing: content-box;
    margin: .5rem;
}
input:focus,
input:active {
    border-color: black;
}
pre {
    border-radius: 3px;
    text-align: left;
    padding: 1rem;
    white-space: pre-wrap;
    display: inline-block;
    font-size: 11px;
    background: #282828;
    color: #fff;
}
span {
    font-weight: 700;
}
.var {
    color: tomato;
}
.default {
    color: orange;
}
.fallback {
    color: yellowgreen;
}
[class*="random"] {
    width: 20%;
}

HTML

<article>
    <h1>SVG &lt;use&gt; CSS Variables <svg viewBox="0 0 701.8 386.8" class="ugly"><use xlink:href="#horse" /></svg></h1>

<fieldset>
        <label>Body
            <input type="color" id="body" />
        </label>
        <label>Muzzle
            <input type="color" id="muzzle" />
        </label>
        <label>Eyes
            <input type="color" id="eyes" />
        </label>
        <label>Teeth
            <input type="color" id="teeth" />
        </label>
        <label>Hoofs
            <input type="color" id="hoofs" />
        </label>
    </fieldset>

<pre>
&lt;path style="fill: <span class="var">var(--color-name, <span class="default">#8d5000</span>)</span>" fill="<span class="fallback">#8d5000</span>" d="M...." /&gt;
                   <span class="var">CSS variable</span>      <span class="default">Default</span>         <span class="fallback">Fallback</span></pre>

<h2>Randomized</h2>
    <svg viewBox="0 0 701.8 386.8" class="random-1">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-2">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-3">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-4">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-5">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-6">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-7">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-8">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-9">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-10">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-11">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-12">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-13">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-14">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-15">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-16">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-17">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-18">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-19">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-20">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-21">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-22">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-23">
        <use xlink:href="#horse" />
    </svg>
    <svg viewBox="0 0 701.8 386.8" class="random-24">
        <use xlink:href="#horse" />
    </svg>
</article>

Use CSS Variables in SVG

svg, css, var

编辑器支持Emmet

快捷键

Use CSS Variables in SVG

svg, css, var

用CSS3和SVG做的食豆小子游戏演示动画

使用SVG滤镜和CSS3实现的按钮悬停粘稠（肿胀）变形动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：