SVGの “non-scaling-stroke “属性のサポート
12月 5, 2019
1 読了時間
オブジェクトの線は、適用される変形に関係なく、元の幅を維持することが望ましい場合があります。例えば、ユーザーの位置と目的地を表示する地図上に線を引くとします。ユーザーが地図を拡大したとき、地図は拡大するが、線の幅はそのままにしたい。
SVG規格では、”non-scaling-stroke “属性は、ストロークの幅がズームやスケーリングに依存しないことを示す。言い換えれば、オブジェクトの線は変形やズームに影響されないということです。
以下は、同じ線の太さの2つの矩形の例です。左の矩形は “non-scaling-stroke “属性を使っていますが、右の矩形はこの属性を使っていません。
SVGファイルを見てみましょう。
<svg viewBox="0 0 90 45" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="40" height="40" fill="white" stroke="blue" stroke-width="1px" vector-effect="non-scaling-stroke"/> <rect x="45" y="1" width="40" height="40" fill="white" stroke="green" stroke-width="1px" /> </svg>
また、「4D SVG」テーマに新しいコマンドを追加しました。描画オブジェクトに「non-scaling-stroke」属性を定義するための SVG_SET_STROKE_VECTOR_EFFECTメソッドで定義できます。
// Create view box
$svgRef
// Save image on disk:=SVG_New (90;45)
// First rectangle with the non-scaling-stroke attribute
$rect1 :=SVG_New_rect ($svgRef;1;40;40;0;0; "blue"; "white";1)
SVG_SET_STROKE_VECTOR_EFFECT ($rect1; "non-scaling-stroke")// Second rectangle$rect2 :=SVG_New_rect ($svgRef;45;1;40;40;0; "green"; "white";1)
File ("/RESOURCES/Images/rectangle.svg").create()
SVG_SAVE_AS_TEXT ($svgRef;File("/RESOURCES/Images/rectangle.svg").platformPath)
// Clear reference
SVG_CLEAR ($svgRef)
現在、この投稿へのコメント機能は利用できません。