SVG 固定大小的元素在 Viewbox 中相对定位

Question

在下面的示例 SVG 中，如何给 marker/pin（红色圆圈）一个固定大小（比如以像素为单位），同时在其父 viewbox 中相对定位？也就是说，marker/pin 在视觉上总是大小相同，但可以很容易地定位到我们正在查看的地图的相对部分。

我们已将代码添加到 fiddle 此处：https://jsfiddle.net/krbgxqtm/13/

补充评论：

我们希望避免使用客户端代码（即 JavaScript）。
我们并不总是知道容器的准确尺寸，因为它会在其中进行响应定位。
我们已经看到使用 CSS background-image 实现大小调整的示例，但这不能满足周围超链接的大小。

Answer 1

由于您的图钉是一个圆圈，因此您可以使用很短的线 stroke-linecap="round" vector-effect="non-scaling-stroke"。 stroke-linecap="round" 将使直线看起来像一个圆。 vector-effect="non-scaling-stroke" 将保持线条未缩放。

补充观察：

如果您打算在 viewBox 中使用符号，这是不正确的：viewBox="0 0 10px 10px" 不要使用 px 单位。还有

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>

SVG 固定大小的元素在 Viewbox 中相对定位

SVG Fixed Sized Element Positioned Relatively within Viewbox

gis

svg

css-position