文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将svg填充效果应用于div类？

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

Stack Overflow用户

提问于 2015-03-09 23:36:49

回答 1查看 602关注 0票数 2

我的宝贝

<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中定义的文本，还是可以应用于dynamic(?)像时钟这样的短信？

提前谢谢。

css

svg

fill

html

回答 1

Stack Overflow用户

发布于 2015-03-10 01:30:27

你不需要SVG。只需将你的图像直接设置为你的电视背景。

#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>

这里的小提琴演示。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28953693

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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