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>
关于html - 如何将 svg 填充效果应用于 div 类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28953693/