Question

我的任务是制作一些纹理覆盖的文本，SVG，因为它似乎在IE8中运行良好似乎是个好主意，但我很难将它定位在div中。 SVG由几行文本组成，应该以父DIV为中心，但我很难按照自己的意愿使用它。似乎我在CSS和SVG属性之间的某个地方感到困惑。

以下是我已经提出的内容：

http://jsfiddle.net/HVTA4/

<div class="demo1">
<svg>
    <defs>
        <pattern id="diagonal" patternUnits="userSpaceOnUse" width="840" height="960">
            <image xlink:href="http://i.imgur.com/GWYrynq.jpg" width="840" height="960" />
        </pattern>
    </defs>
    <text x="0" y="0" style="text-anchor: middle;">
        <tspan x="0" dy="1.2em">1st line1st line</tspan>
        <tspan x="0" dy="1.2em">2nd line</tspan>
        <tspan x="0" dy="1.2em">3rd line</tspan>
        <tspan x="0" dy="2.8em">lastline</tspan>
    </text>
</svg>

body {
font: .9em Helvetica, Arial, sans-serif;
background: darkgreen;
margin: 0;
padding: 0;
color: #575142;
}
text {
    fill: url(#diagonal);
}
.demo1 {
    width:305px;
    height: 335px;
    display:block;
    background: #FFEE1F;
    font-size: 42px;
    text-align: center;        
    font-weight: bold;
    color: darkgreen;
    overflow:hidden;
    position:relative;
    top: 50px;
    left: 50px;
    margin: 0;
    padding: 0;
}

.demo1 svg {
    display:block;
    margin: 0;
    padding: 0;
}

干杯第m

Answer 1

对于第一个问题，您只需将每个x的{{1}}属性设置为50％

<tspan>

http://jsfiddle.net/HVTA4/2/

Answer 2

添加svg元素大小并将文本元素的位置设置为50％。

.demo1 svg {
    display:block;
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
}
<text x="50%" y="0" style="text-anchor: middle;">
    <tspan x="50%" dy="1.2em">1st line1st line</tspan>
    <tspan x="50%" dy="1.2em">2nd line</tspan>
    <tspan x="50%" dy="1.2em">3rd line</tspan>
    <tspan x="50%" dy="2.8em">lastline</tspan>
</text>

DIV内的SVG显示不正确

2 个答案: