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

My Fiddle

.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 中定义的文本，还是可以将其应用于像时钟这样的动态（？）文本？

提前谢谢。

你不需要

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>

演示小提琴在这里。

相关内容

最新更新

热门标签：