My challenge involves fitting an svg into a div. The svg consists of a single path. Even though I have correctly set up the viewBox and preserveAspectRatio, part of the path is drawn outside the expected boundaries. You can find the fiddle here, and below is the code snippet:
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;
}
Despite my efforts, the positioning of the line in the svg seems off to the left. Are there any suggestions for resolving this issue?