1

SVG でレンダリングするマーカーを取得しようとしています。これは、線に面した開いた矢印である必要があります。マーカーが切り取られています (パスが x 軸の中心にあるためと考えられます)。マーカー全体が表示されるようにマーカー ビュー領域を拡張するにはどうすればよいですか?

テスト SVG ファイルは http://www.robmunro.net/misc/arrows.svgです。

正しい出力は次のようになります: http://www.robmunro.net/misc/arrows.png

4

3 に答える 3

6

マーカー要素に設定できoverflow:visibleます。デフォルトでは、マーカータイルの境界にクリップします。次に、マーカーに必要な調整を加えて、必要な配置などを取得します。参考までに、マーカータイルの境界全体をカバーする半透明の長方形を作成して、外側にいるときをはっきりと確認できるようにすることをお勧めします。

于 2011-07-06T06:17:09.957 に答える
3

マーカーの座標は (15,-15)、(0,15)、(-15,-15) ですが、マーカーのみがボックス (0,0) から (markerWidth, markerHeight) にのみ描画されます。マーカーが正の値のみを持つように再描画すると、マーカーが表示されます (境界線が少しあります)。

<path d="M5,5 L20,20 5,35" />

そして、マーカーのサイズが十分に大きいことを確認してください:

markerWidth="25" markerHeight="40"

次に、refX 属性と reY 属性を使用して、ライン上にあることを確認できます。

refX="20" refY="20"

全体として、次のようになります。

<marker id="stip_1163554992"  markerUnits="strokeWidth" orient="auto" refX="20" refY="20" markerWidth="25" markerHeight="40"  style="stroke:#ffff00;stroke-width:5.0px;stroke-opacity:1.0;stroke-linecap:round;stroke-linejoin:round;fill:none;">
  <path d="M5,5 L20,20 5,35" />
</marker>
于 2011-07-06T11:04:22.500 に答える