Changing size and position of svg map-CodePudding

I have a map of my country, and I try to resize it so as not to take up so much space on the screen, but for some reason, whenever I try to do so, a part of the map is erased as if a square had removed that area, would anyone know how to fix that?

xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

mapsvg:geoViewBox="-90.125247 14.450692 -87.683841 13.152442"

width="792.89117"

height="431.65646">

CodePudding user response：

You can edit the position and size with css.

svg { width: 100px; height: 200px;}

(makes the svg 100x200 px)

CodePudding user response：

size and position an svg image using a div container

In this example, I've used an inline svg element to illustrate the use of a styled container div to position and size an svg image (your image won't load in the snippet tool so I've used an arbitrary image of my own).

The image has dimensions (specified as attributes of the svg opening tag) of 1200, 840px and renders at that size if used outside of an unrestrained container.

The image element is inside a div element of class .container. The container is styled to the required size in the style sheet (in this case 200x140px, keeping the aspect ratio of the original image size). In the style sheet, the svg element is sized to 100% for both width and height (these are relative to the container).

The position on the page is determined by the position of the container. In this example I've set the body to be a flex container and justified its contents to flex-end (to push the container and its image) to the right of the viewport.

This approach is adaptable to any inline svg element and is reliable.

body {
  display: flex;
  justify-content: flex-end;
}

svg {
width: 100%;
height: 100%
}

div.container {
border: 1px solid red;
width: 200px;
height: 140px;
}

<div >
<svg id="l2khr5eg" version="1.1" width="1200" height="840" viewBox="0 0 120 84" xmlns="http://www.w3.org/2000/svg"><rect x="12" y="72.67826086956522" width="6.4" height="2.921739130434782" stroke="black" stroke-width="0.2px" fill="brown" ><title>0.87% of total</title></rect><rect x="18.4" y="69.75652173913045" width="6.4" height="5.843478260869564" stroke="black" stroke-width="0.2px" fill="brown" ><title>1.75% of total</title></rect><rect x="24.8" y="69.75652173913045" width="6.4" height="5.843478260869564" stroke="black" stroke-width="0.2px" fill="brown" ><title>1.75% of total</title></rect><rect x="31.200000000000003" y="63.91304347826088" width="6.4" height="11.686956521739129" stroke="black" stroke-width="0.2px" fill="brown" ><title>3.5% of total</title></rect><rect x="37.6" y="58.069565217391315" width="6.4" height="17.530434782608697" stroke="black" stroke-width="0.2px" fill="brown" ><title>5.26% of total</title></rect><rect x="44" y="55.14782608695653" width="6.4" height="20.45217391304348" stroke="black" stroke-width="0.2px" fill="brown" ><title>6.14% of total</title></rect><rect x="50.400000000000006" y="49.30434782608697" width="6.4" height="26.29565217391304" stroke="black" stroke-width="0.2px" fill="brown" ><title>7.89% of total</title></rect><rect x="56.800000000000004" y="37.617391304347834" width="6.4" height="37.982608695652175" stroke="black" stroke-width="0.2px" fill="brown" ><title>11.4% of total</title></rect><rect x="63.2" y="31.773913043478274" width="6.4" height="43.826086956521735" stroke="black" stroke-width="0.2px" fill="brown" ><title>13.15% of total</title></rect><rect x="69.6" y="8.400000000000006" width="6.4" height="67.2" stroke="black" stroke-width="0.2px" fill="brown" ><title>20.17% of total</title></rect><rect x="76" y="40.539130434782614" width="6.4" height="35.060869565217395" stroke="black" stroke-width="0.2px" fill="brown" ><title>10.52% of total</title></rect><rect x="82.4" y="43.46086956521739" width="6.4" height="32.139130434782615" stroke="black" stroke-width="0.2px" fill="brown" ><title>9.64% of total</title></rect><rect x="88.80000000000001" y="63.91304347826088" width="6.4" height="11.686956521739129" stroke="black" stroke-width="0.2px" fill="brown" ><title>3.5% of total</title></rect><rect x="95.2" y="66.83478260869566" width="6.4" height="8.765217391304349" stroke="black" stroke-width="0.2px" fill="brown" ><title>2.63% of total</title></rect><rect x="101.60000000000001" y="69.75652173913045" width="6.4" height="5.843478260869564" stroke="black" stroke-width="0.2px" fill="brown" ><title>1.75% of total</title></rect><text text-anchor="start" x="12" y="3.3600000000000003" font-size="5.04" font-family="Arial" fill="black" font-weight="lighter">my data distribution</text><line x1="12" y1="75.60000000000001" x2="12" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="18.4" y1="75.60000000000001" x2="18.4" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="24.8" y1="75.60000000000001" x2="24.8" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="31.200000000000003" y1="75.60000000000001" x2="31.200000000000003" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="37.6" y1="75.60000000000001" x2="37.6" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="44" y1="75.60000000000001" x2="44" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="50.400000000000006" y1="75.60000000000001" x2="50.400000000000006" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="56.800000000000004" y1="75.60000000000001" x2="56.800000000000004" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="63.2" y1="75.60000000000001" x2="63.2" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="69.6" y1="75.60000000000001" x2="69.6" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="76" y1="75.60000000000001" x2="76" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="82.4" y1="75.60000000000001" x2="82.4" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="88.80000000000001" y1="75.60000000000001" x2="88.80000000000001" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="95.2" y1="75.60000000000001" x2="95.2" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="101.60000000000001" y1="75.60000000000001" x2="101.60000000000001" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="108" y1="75.60000000000001" x2="108" y2="76.944" stroke="black" stroke-width="0.4px"/><text text-anchor="middle" x="12" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-1</text><text text-anchor="middle" x="18.4" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.9</text><text text-anchor="middle" x="24.8" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.8</text><text text-anchor="middle" x="31.200000000000003" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.7</text><text text-anchor="middle" x="37.6" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.6</text><text text-anchor="middle" x="44" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.5</text><text text-anchor="middle" x="50.400000000000006" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.4</text><text text-anchor="middle" x="56.800000000000004" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.3</text><text text-anchor="middle" x="63.2" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.2</text><text text-anchor="middle" x="69.6" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.1</text><text text-anchor="middle" x="76" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">0</text><text text-anchor="middle" x="82.4" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">0.1</text><text text-anchor="middle" x="88.80000000000001" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">0.2</text><text text-anchor="middle" x="95.2" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">0.3</text><text text-anchor="middle" x="101.60000000000001" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">0.4</text><text text-anchor="middle" x="108" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">0.5</text></svg></div>