SVG內DIV顯示不正確

我得到的任務是使一些覆蓋了紋理，SVG的文本，因爲它似乎甚至在IE8中運行良好似乎是個好主意，但我很難在div中定位它。 SVG由幾行文本組成，這些文本應該以父DIV爲中心，但我很難讓它按照我的意願工作。似乎我在CSS和SVG屬性之間的某個地方感到困惑。SVG內DIV顯示不正確

這裏是我想出不已：

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個

來源

2014-03-01 MoreThanChaos

SEO在堆棧溢出時偏離主題 –

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

來源

2014-03-01 13:41:19 defghi1977

對於第一個問題，你可以設置ea的x屬性CH <tspan>至50％

<text x="0" y="0" 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>

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

來源

2014-03-01 13:39:36 Adrift

SVG內DIV顯示不正確

回答

相關問題