css - DIV 内的 SVG 显示不正确

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;
}

干杯月

Answer 1

添加 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>