SVG Fixed Sized Element Positioned Relatively within Viewbox

user_213707 0
Viewed 180

In the example SVG below, how can the marker/pin (red circle) be given a fixed size (say in pixels) whilst at the same time being relatively positioned within its parent viewbox? That is, so that the marker/pin is always visually the same size but can easily be positioned relative part of the map we are viewing.

Map of Portugal in various containers of different sizes and viewboxes

We've added the code to a fiddle here: https://jsfiddle.net/krbgxqtm/13/

Additional comments:

  • We would like to avoid the use of client-side code (i.e JavaScript).
  • We will not always know the container's dimensions exactly due to the responsive positioning it will be within.
  • We've seen examples of using CSS background-image for achieving the sizing, but this will not satisfy the size of the surrounding hyperlink.
css-position gis svg
1 Answers

Since your pin is a circle you can use a very short line stroke-linecap="round" vector-effect="non-scaling-stroke". The stroke-linecap="round" will give the line the aspect of a circle. The vector-effect="non-scaling-stroke" will keep the line unscaled.

Aditional observation:

If you intend to use a symbol the viewBox this is NOT correct: viewBox="0 0 10px 10px" Don't use px units. Also 

svg {
  background-color: khaki;
  border: solid 1px #9c9c9c;
}

.container {
  background-color: #9ecae1;
  border: solid 1px #2c3e50;
  margin-top: 20px;
  width: 200px;
  height: 150px;
}

.container-2 {
  width: 400px;
  height: 150px;
}

.container-3 {
  width: 250px;
  height: 300px;
}

.svg-container {
  width: 100%;
  height: 100%;
}

.outline {
  fill: #9c9c9c;
}
 <svg width="0" height="0">
        <defs>
            <path id="country-PT" class="country" stroke="#141414" stroke-opacity="1" stroke-width="1" stroke-linecap="miter" stroke-linejoin="miter" fill="#4F4F4F" fill-opacity="1" fill-rule="evenodd" d="M93 531L101 527L101 532L119 530L119 534L124 536L115 544L117 555L114 557L116 560L114 565L108 565L115 574L110 583L113 586L115 586L109 595L110 601L104 604L96 602L92 603L94 596L93 582L95 583L95 581L89 583L90 579L86 578L87 569L91 566L95 546z"></path>
            <g id="pin" class="pin-container" >
                <line x1="10" x2="10.1" y1="10" y2="10" stroke-width="10" stroke="red" stroke-linecap="round" vector-effect="non-scaling-stroke" transform="translate(-5,-5)" />
            </g>
        </defs>
    </svg>

    <div class="container">
        <svg class="svg-container" viewBox="85 525 43 83" >
            <!-- Country -->
            <rect class="outline" x="85" y="525" width="43" height="83" />
            <use href="#country-PT"/>
            <!-- Marker -->
            <a href="#goToA">
              <use x="85" y="574" href="#pin"/>
            </a>
        </svg>
    </div>

    <div class="container container-2">
        <svg class="svg-container" viewBox="85 540 21.5 41.5" preserveAspectRatio="xMidYMid meet">
            <!-- Country -->
            <rect class="outline" x="85" y="525" width="43" height="83" />
            <use href="#country-PT"/>
            <!-- Marker -->
            <a href="#goToA">
              <use x="85" y="574" href="#pin"/>
            </a>
        </svg>
    </div>

    <div class="container container-3">
        <svg class="svg-container" viewBox="85 540 20 40" preserveAspectRatio="xMidYMid meet">
            <!-- Country -->
            <rect class="outline" x="85" y="525" width="43" height="83" />
            <use href="#country-PT"/>
            <!-- Marker -->
            <a href="#goToA">
              <use x="85" y="574" href="#pin"/>
            </a>
        </svg>
    </div>

user_78973950
Related