0

スナップをいじり始めたばかりで、ピクセルではなくインチで作業しようとしていますが、これは可能ですか? もしそうなら、どうすればインチを使うことができますか？インチを受け入れる関数と受け入れない関数があるようです。

// This works
var s = Snap("1.5in", "1.5in");

// This works
s.rect("0in", "0in", "1.5in", "1.5in").attr({
    stroke: "#f00",
    fill: "transparent"
});

// This works
s.path("M0,144L144,0").attr({
    stroke: "#f00"
});

// This fails (Error: Invalid value for <path> attribute d="M0in,0inL1.5in,1.5in")
s.path("M0in,0inL1.5in,1.5in").attr({
    stroke: "#f00"
});
4

1 に答える 1

1

あなたが発見したように、特定の SVG 値は、単位付きの長さではなく、生の数値 (SVG ユーザー座標として解釈される) のみを受け入れます。パス「d」属性はその 1 つです。

これは snap.svg の問題ではなく、基礎となる SVG 要素がどのように機能するかです。

最も簡単な方法は、自分で換算係数を作成することです。SVG ユーザー座標の初期値は、1 ユーザー単位が 1 CSS "px" (ピクセル) 単位に等しいことです。 CSS 標準では、"px" 単位は "in" (インチ) 単位の 1/96 に正確に等しくなります。 変換または viewBox 属性を使用して SVG をスケーリングすると、すべての長さの単位がそれに応じてスケーリングされるため、比率は一定のままです。

したがって、 と同等のパスを作成するには"M0in,0inL1.5in,1.5in"、各数値に 96 を掛けてから、文字列を連結します。

s.path("M0,0L" + 1.5*96 + "," + 1.5*96).attr({
    stroke: "#f00"
});

作成するパスが長くて複雑な場合は、文字列と数値の長いリストを結合して 1 つの文字列にする演算子Array.join("")よりも効率的であることに注意してください。+

ただし、CSS/SVG の "in" 単位が常に正確に 1 インチとして画面に表示されるとは限らないことに注意してください。ドキュメントを印刷している場合は、かなり正確なはずです。しかし、もちろん、SVG をスケーリングまたは変換している場合は、1 インチにも満たない可能性があります。

于 2014-04-15T23:26:50.297 に答える