Question

HTML

<body onLoad="initialize()">
<svg>
    <defs>
        <pattern id="wood" patternUnits="userSpaceOnUse" width="400" height="400">
            <image xlink:href="http://subtlepatterns.com/patterns/purty_wood.png" width="400" height="400" />
        </pattern>
    </defs>
    <text y="1.2em">Sample</text>
</svg>

<div id="container">
    <div id="minute"></div>
    <div id="hour"></div>
</div>

CSS

body {
margin: 0;
padding: 0;
width: 320px;
height: 570px;
font-family: Default;}
svg {
width: 6em;
height: 1.5em;
font: 900 500%/1.2'Arial Black', sans-serif;
}
text {
fill: url(#wood);
text-shadow:  0px -2px 1px rgba(0,0,0,.9), 0px 1px 1px rgba(255,255,255,.9);
}
#container {
width: 100%;
height: 100%;
text-align:center;
vertical-align:middle;
}

#minute {
fill: url(#wood);
position: Absolute;
right: 10px;
font-family:"Arial";
font-weight: normal;
font-size: 40px;
text-align: right;
text-shadow:  0px -2px 1px rgba(0,0,0,.9), 0px 1px 1px rgba(255,255,255,.9);
}
#hour {
fill: url(#wood);
position: Absolute;
right: 55px;
font-family:"Arial";
font-weight: normal;
font-size: 68px;
text-align: right;
text-shadow:  0px -2px 1px rgba(0,0,0,.9), 0px 1px 1px rgba(255,255,255,.9);
}

很抱歉，如果我的问题措辞不好，已经有一段时间了，因为我已经这么做了很多术语让我失望了（可能也是我在其他地方找不到答案的原因。）我想应用木图像（在左侧的示例文本上看到）组成右侧时钟的文本。 svg只能应用于html中定义的文本，还是可以将其应用于动态（？）文本，如时钟？

提前致谢。

Answer 1

您不需要SVG。只需将图像直接设置为div的背景。

#minute {
    background: url(http://subtlepatterns.com/patterns/purty_wood.png);
}

<强>更新

您无法将SVG模式应用于HTML文本，但您可以将其应用于SVG <text>元素。

<text id="container" x="20" y="250">
    <tspan id="hour"></tspan>
    <tspan id="minute" dy="-0.5em"></tspan>
</text>

Demo fiddle here.

如何将svg填充效果应用于div类？

1 个答案: