SVG座標移位

我試圖將svg放入div中。 svg包含單一路徑。我認爲，我已經正確設置了viewBox和preserveAspectRatio，但是路徑的一部分（它應該完全適合svg）在viewBox之外繪製。這裏的the fiddle，這裏是代碼：SVG座標移位

HTML：

<div class='sparkline' class="ng-isolate-scope"> 
    <svg viewBox="1 1 10 10" preserveAspectRatio="none"> 
     <path d="M0,10L5,5L10,0"></path> 
    </svg> 
</div>

CSS：

path { 
    stroke: blue; 
    stroke-width: 0.2; 
    fill: none; 
} 

.sparkline{ 
    width: 200px; 
    height: 200px; 
    position:absolute; 
    top:0px; 
    left:0px; 
    border: 1px solid black; 
    margin: 20px; 
} 

svg{ 
    width:100%; 
    height:100%; 
    display: block; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
}

我看到被移到左側沒有理由爲線，我該怎麼克服這個問題？

來源

2013-12-22 Kuba Orlik

如果框爲1-10且路徑爲0，路徑應該在視框內如何？恕我直言，它的繪製正確。使用viewBox =「0 0 10 10」。 – Stan

'viewBox =「0 0 10 10」'而不是 – Anthony

謝謝安東尼！如果您以此作爲答案，我會接受它！ :) –

您的代碼按預期工作，但可能包含拼寫錯誤。假設viewBox被定義在1和10之間，X或/和Y中帶有0的行應該從框中移出。

使用viewBox="0 0 10 10"將線條對準盒子的對角線。

來源

2013-12-24 18:07:35 Stan

回答

相關問題