4

SVG でスケーラブルなスキーマが必要です。ただし、矢印などの一部の要素は、スキーマのスケールに関係なく、スキーマ上で同じサイズにする必要があります。SVG 変換属性
を 介してスキーマのスケーラビリティを実装し、 SVG マーカーを介して矢印を実装しています。 しかし、私は問題を抱えています:が形状に適用されると、それらのマーカーもスケールになります。
transform=scale(s)

マーカーが形状の変換に従ってスケーリングされないように、SVGにマーカーをスケーリングされた形状に適用する方法はありますか?
または、そのために間違ったアプローチを使用していますか?

ここで例を参照してください：

<svg id="svg-root" class="drawing" width="100%" height="500" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <marker id="myMarker" refX="6" refY="6" markerWidth="12" markerHeight="12" stroke-width="1" stroke="blue" orient="auto" fill="none" markerUnits="strokeWidth">
            <circle cx="6" cy="6" r="5" />
        </marker>
    </defs>
    <g transform="scale(2)">
        <line id="line1" x1="20" y1="50" x2="200" y2="50" stroke="green" stroke-width="1" marker-start="url(#myMarker)" vector-effect="non-scaling-stroke"/>
    </g>
    <g transform="scale(3)">
        <line id="line2" x1="20" y1="50" x2="200" y2="50" stroke="green" stroke-width="1" marker-start="url(#myMarker)" vector-effect="non-scaling-stroke"/>
    </g>
</svg>

線line1と線の両方line2に、radius="6" の円と円 stroke width="1" が含まれている必要があります。
今のところ、半径は「12」と「18」です。幅はそれに応じて「2」と「3」です。それは適切ではありません。

私はvector-effect="non-scaling-stroke"形に適用しようとしています。次に、シェイプのストローク幅はスケーリングされません。そして、私はmarkerUnits="strokeWidth"マーカーに適用しています。
しかし、それは役に立ちません。

ちょっと想像できる唯一の回避策は、transformスキーマ スケーリングの使用を停止することです。その場合、スキーマ スケールが更新された後、形状の座標を手動で再計算する必要があります。実際、それは良く見えません。

4

1 に答える 1

0

ここから：

マーカーを使用してパスのストローク幅に合わせてマーカーが自動的にスケーリングされないようにするには、属性を に設定しmarkerUnitsますuserSpaceOnUse。そうすれば、マーカーを使用するパスのストローク幅に関係なく、マーカーのサイズが維持されます。

例えば：

<marker id="myMarker" markerUnits="userSpaceOnUse">
  ...
</marker>
于 2020-07-17T02:50:06.293 に答える