Координаты SVG сдвинуты

Question

Я пытаюсь установить svg в div. Svg содержит один путь. Я настроил viewBox и preserveAspectRatio правильно, я думаю, но часть пути (который, как предполагается, полностью помещается в svg), выведен за пределы viewBox. Вот the fiddle, а вот код:

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

Я не вижу причин, по линии, чтобы быть сдвинута влево, как я могу это преодолеть?

Answer 1

Ваш код работает должным образом, но возможно содержит опечатку. При условии, что viewBox определен между 1 и 10, строка с 0 в X или/и Y должна выглядеть сдвинутой с поля.

Используйте viewBox="0 0 10 10", чтобы установить линию в диагональ окна.