13. 塗り:フィル法, ストローク法, マーカシンボル — Painting: Filling, Stroking and Marker Symbols

13.1. 序論

13.1.1. 各種~定義

`~fill@ / `~stroke@ とは、[ `図形~要素$, あるいは~text文字列~内の文字~glyph ]の[ 内域/外形線 ]の`塗り$を成す演算である。 ◎ fill The operation of painting the interior of a shape or the interior of the character glyphs in a text string. ◎ stroke The operation of painting the outline of a shape or the outline of character glyphs in a text string.

図形を定義する~graphicな要素 — `path$e 要素, `基本~図形$, `~text内容~要素$ — は、[ `~fill$ / `~stroke$ ]すること — すなわち,~objの内域の塗ng /~objの外形線に沿う塗ng — により,描画される。 ~fill法と~stroke法は、両者とも塗ng演算である。 ~SVG-2は、~graphicな要素を~fillや~strokeで塗れる,何種かの塗りを~supportする: ◎ Graphical elements that define a shape – ‘path’ elements, basic shapes, and text content elements – are rendered by being filled, which is painting the interior of the object, and stroked, which is painting along the outline of the object. Filling and stroking are both painting operations. SVG 2 supports a number of different paints that the fill and stroke of a graphical element can be painted with:

  • 単独の色 ◎ a single color,
  • ~gradient(線型/放射型) ◎ a gradient (linear or radial)
  • ~pattern(~vector/~raster, 場合によっては敷詰められる) ◎ a pattern (vector or raster, possibly tiled),
  • `css-images-3$r の構文を利用して指定される,他の画像 ◎ other images as specified using CSS Image Value syntax [css-images-3].

要素の[ ~fill法/~stroke法 ]に利用する塗りは,[ `fill$p / `stroke$p ]~propを利用して指定される。 次~節にて,これらの~prop用に利用できる各種~値を述べる。 ◎ The paint to use for filling and stroking an element is specified using the fill and stroke properties. The following section describes the different values that can be used for these properties.

`fill-opacity$p や `stroke-width$p などの他の~propも,[ ~fill/~stroke ]による塗りが~canvasに適用される途上に効果がある。 これらの~propについては、[ § 各種~fill~prop§ 各種~stroke~prop ]にて述べる。 ◎ Other properties, such as fill-opacity and stroke-width, also have an effect on the way fill and stroke paint is applied to the canvas. The Fill properties and Stroke properties sections below describe these properties.

一部の`~graphics要素$ — `path$e 要素, `基本~図形$ — は、~marker~symbolも伴い得る。 ~marker~symbolは、要素の~pathの頂点や, ~pathに沿って他の位置に描かれる。 ~markerをどう定義して利用するかについては、 § ~marker にて述べる。 ◎ Some graphics elements – ‘path’ elements and basic shapes – can also have marker symbols drawn at their vertices or at other positions along the path that they describe. The Markers section below describes how markers can be defined and used.

~SVG-2は,図形~上に~markerを追加するものと、 Tokyo F2F にて解決された( `http://www.w3.org/2013/06/03-svg-minutes.html#item03$refer )。 ◎ SVG 2 adds markers on shapes. Resolved at Tokyo F2F.

13.2. 塗りの指定-法

~SVG-2要件: 現在の[ ~fill塗り, ~stroke塗り, 等々 ]を参照するための新たな塗り値を追加する。 ◎ SVG 2 Requirement: Add new paint values for referencing current fill paint, stroke paint, etc.

  • 解決: 新たな塗り値として[ `currentFillPaint^v, `currentStrokePaint^v, 等々 ]を~SVG-2に追加する( `http://www.w3.org/2011/07/29-svg-minutes.html#item02$refer )。 ◎ Resolution: We will add new paint values currentFillPaint, currentStrokePaint etc. to SVG 2
  • 目的: 中でも、~marker色と~stroke色を合致させる容易な仕方を供する。 ◎ Purpose: Among other things, to provide an easy way to match marker color to stroke color.
  • Owner: Chris (`3094$ACTION)

~SVG-2による追加: [ ~fill/~stroke ]内に複数の塗りを許容する。 ◎ SVG 2 Addition: Allow multiple paints in fill and stroke.

  • 解決: ~SVG-2における[ ~fill/~stroke ]~propには、複数の塗りを許容するようにする( `http://www.w3.org/2013/06/03-svg-minutes.html#item10$refer )。 ◎ Resolution: We will allow multiple paints in the fill and stroke properties in SVG 2.
  • 目的: `cross hatching^en を作成するときや, ベタな~fillの~~上層に部分的に透明な~patternを置くとき, 等々に有用になる。 ◎ Purpose: Useful for creating cross hatchings, putting a partially transparent pattern on top of a solid fill, etc.
  • Owner: Tav (`3500$ACTION)
  • 先送りされた: これは~SVG-2用には落とされたが、 CSS Fill and Stroke Level 3 に~~連動して,後に追加されることになる。 ◎ Deferred: This was dropped for SVG 2, but will be added later in sync with CSS Fill and Stroke Level 3

下に定義される[ `fill$p / `stroke$p ]~propは、図形や~textの[ 内域/外形線 ]を描画するときに利用される `塗り@ を指定するために利用される。 塗り指定は、 1 個~以上の塗り層で構成され,各~層は~canvas上に色~値を置く仕方を述べる。 これらの塗り層の中では、[ `color$t, `~gradient$, `~pattern$ ]による塗りが~supportされる。 ◎ The fill and stroke properties, defined below, are used to specify the paint used to render the interior of and the stroke around shapes and text. A paint specification describes a way of putting color values on to the canvas and is composed of one or more paint layers. Four types of paints within these paint layers are supported: solid colors, gradients, and patterns.

`paint$t 値は、次で定義される: ◎ A <paint> value is defined as follows:

`paint@t = `none^v | `color$t | `url$t [`none^v | `color$t]? | `context-fill^v | `context-stroke^v

アリな値は: ◎ With the possible values:

`none^v
この層には、塗りは適用しない。 ◎ No paint is applied in this layer.
`url$t [`none^v | `color$t]?
`塗り~server要素@ — すなわち,塗り~serverを定義する要素( `linearGradient$e / `pattern$e / `radialGradient$e ) — への~URL参照に加え、塗り~server参照を解決できない場合に利用される~fallback値(省略可)が後続する。 ◎ A URL reference to a paint server element, which is an element that defines a paint server: ‘linearGradient’, ‘pattern’ and ‘radialGradient’, optionally followed by a fall-back value that is used if the paint server reference cannot be resolved.
`color$t
ベタ色による塗り。 ◎ A solid color paint.
`context-fill^v
`文脈~要素$の `fill$p の塗り値を利用する。 ◎ Use the paint value of fill from a context element.
`context-stroke^v
`文脈~要素$の `stroke$p の塗り値を利用する。 ◎ Use the paint value of stroke from a context element.

`paint$t は、塗り~server参照, および後続する[ `color$t / ~keyword `none^v ](省略可)を許容する。 この省略可な値は、在るならば[ 当の層における塗り~server参照が,(存在しない要素や妥当でない塗り~serverを指していることに因り)無効な場合に利用する~fallback値 ]を与える。 ◎ A <paint> allows a paint server reference, to be optionally followed by a <color> or the keyword none. When this optional value is given, the <color> value or the value none is a fallback value to use if the paint server reference in the layer is invalid (due to pointing to an element that does not exist or which is not a valid paint server).

注記: これは、~CSS `background$p の構文と少しばかり異なることに注意 — `background$p においては、その値の `final^en 層 【最も奥に塗られる層 — 値の末尾の `final-bg-layer^t 】 に指定される背景~画像, 色が,描画される画像, 色の両者を与える。 ◎ Note that this is slightly different from CSS background syntax, where a background image and color specified in the final layer of a background value will result in both the image and color being rendered.

`paint$t 内の塗り~server参照が無効, かつ ~fallback値が与えられていない場合、その層には塗りは描画されない。 ◎ If a paint server reference in a <paint> is invalid, and no fall-back value is given, no paint is rendered for that layer.

この挙動は、~SVG 1.1 から変更された — そこでは、そのような場合,文書は~errorになるとされていた ◎ This is changed from SVG 1.1 behavior where the document is in error if a paint server reference is invalid and there is no fallback color specified.

<rect width="100" height="100" fill="url(#MyHatch) powderblue">
`fallback_paint^dgm
図左の矩形は、 #MyHatch が定義される場合に期待される~fillを示す。 図右の矩形は、 #MyHatch が欠落している場合に期待される~fillを示す。 ◎ The left rectangle shows the expected fill if MyHatch is defined. The right rectangle shows the expected fill if MyHatch is missing.

`color$t 値に対しては, `css-color-3$r に定義される すべての色~構文 も~supportするモノトスル — 次に挙げるものも含め ⇒# `rgb()^v, `rgba()^v, `hsl()^v, `hsla()^v, 拡張された各種 色~keyword, `currentColor^v ◎ For any <color> value, all color syntaxes defined in CSS Color Module Level 3 must be supported, including rgb(), rgba(), hsl(), hsla(), the extended color keywords and the currentColor value.

値[ `context-fill^v / `context-stroke^v ]は、塗られている要素の `文脈~要素@ の[ `fill$p / `stroke$p ]~prop用に生成される塗り層への参照を与える。 所与の %要素 の`文脈~要素$は、次に従って定義される: ◎ The context-fill and context-stroke values are a reference to the paint layers generated for the fill or stroke property, respectively, of the context element of the element being painted. The context element of an element is defined as follows:

  1. [ %要素 は ある `marker$e 要素 %~marker の中にある ]~AND[ %要素 は 各種`~marker~prop$を介して参照されることに因り, %~marker の一部として描画されている ]ならば ⇒ %~marker を参照している要素 ◎ If the element is within a ‘marker’, and is being rendered as part of that marker due to being referenced via a marker property, then the context element is the element referencing that ‘marker’.
  2. 他の場合,[ %要素 は `use$e 要素で~instance化された下位treeの中にある ]ならば ⇒ その `use$e 要素 ◎ If the element is within a sub-tree that is instantiated with a ‘use’ element, then the context element is that ‘use’ element.
  3. 他の場合 ⇒ 文脈~要素は無い ◎ Otherwise, there is no context element.

`文脈~要素$は無い下で,これらの~keywordが利用された場合、塗りは適用されなくなる。 ◎ If there is no context element and these keywords are used, then no paint is applied.

%要素 の ある塗り層が`塗り~server要素$への参照である場合、[ 塗り~server要素, および その内容 ]を拡縮するために利用される[ 座標~空間, 限界~box ]は、 %要素 の`文脈~要素$のそれらになる。 言い換えれば、これらの~keywordで参照される~gradientや~patternは、 %要素 が表現する図形から~markerへ, あるいは `~use要素の~shadow~tree$の中の要素どうしの間で,連続的に塗られるベキである。 ◎ When the context paint layers include paint server references, then the coordinate space and the bounding box used to scale the paint server elements and content are those of the context element. In other words, any gradients and patterns referenced with these keywords should be continuous from the main shape to the markers, or from one element within a use-element shadow tree to another.

参照先の[ `fill$p / `stroke$p ]も値[ `context-fill^v / `context-stroke^v ]をとる場合、それらの`文脈~要素$への参照-法は再帰的になる。 ◎ If the referenced value of fill or stroke is a context-fill and context-stroke value, then those contextual referencing is recursive.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path {
      fill: none;
      stroke-width: 4px;
      marker: url(#diamond);
    }
  </style>
  <path d="M 10,50 v -20 h 40 v -20" stroke="red"/>
  <path d="M 30,70 v -20 h 40 v -20" stroke="green"/>
  <path d="M 50,90 v -20 h 40 v -20" stroke="blue"/>
  <marker id="diamond" markerWidth="12" markerHeight="12" refX="6" refY="6"
          markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3"
            fill="white" stroke="context-stroke" stroke-width="2"/>
  </marker>
</svg>
`marker-context.svg11^dgm
この~markerは、ある図形を利用して定義され,その `stroke$p は `context-stroke^v に設定されている。 これは、~markerを利用する各 `path$e 要素の色を,各~markerに利用させる。 ◎ The marker is defined using a shape whose stroke is set to context-stroke. This causes the marker to take on the color of each ‘path’ element that uses the marker.

13.3. `color^p ~propの効果

注記: `color$p の定義は `css-color-3$r を見よ。 ◎ See the CSS Color Module Level 3 specification for the definition of color. [css-color-3]

`color$p ~propは、[ `fill$p / `stroke$p / `stop-color$p / `flood-color$p / `lighting-color$p ]~prop用に,間接的にもなり得る値 `currentColor^v を供するために利用される。 この~propは、~SVG要素に対しては,他の効果は無い。 ◎ The color property is used to provide a potential indirect value, currentColor, for the fill, stroke, stop-color, flood-color and lighting-color properties. The property has no other effect on SVG elements.

~inline~SVG素片~内の~SVG~textに[ ~HTML文書から 継承した `color$p ~prop値を利用する色 ]を設定できる様子を,次の例に示す。 ◎ The following example shows how the inherited value of the color property from an HTML document can be used to set the color of SVG text in an inline SVG fragment.

<!DOCTYPE html>
<style>
body { color: #468; font: 16px sans-serif }
svg { border: 1px solid #888; background-color: #eee }
</style>
<p>Please see the diagram below:</p>
<svg width="200" height="100">
  <g fill="currentColor">
    <text x="70" y="55" text-anchor="end">START</text>
    <text x="130" y="55">STOP</text>
    <path d="M 85,45 h 25 v -5 l 10,10 -10,10 v -5 h -25 z"/>
  </g>
</svg>
`color-property-inheritance^dgm
~SVG素片~内の~text, 矢印は、継承した `color$p ~propと同じ色で~fillされる。 ◎ The text and arrow in the SVG fragment are filled with the same color as the inherited color property.

13.4. 各種~fill~prop

13.4.1. ~fillによる塗りの指定-法: `fill^p ~prop

◎名 `fill@p ◎値 `paint$t ◎初 `black^v ◎適 `図形~要素$, `~text内容~要素$ ◎継 される ◎百 受容しない ◎算 指定d値 — ただし, `color$t 値は算出され, `url$t 値は絶対~化される ◎ as specified, but with <color> values computed and <url> values made absolute ◎ア 算出d値の型による ◎表終

`fill$p ~propは、所与の~graphicな要素の内域を塗る。 図形を成す外形線の内側が,塗られる区画になる。 図形の内側を決定するためには、すべての下位pathが考慮され,内域は `fill-rule$p ~propの現在の値に結付けられる規則に則って決定される。 この塗られる区画には、図形を成す幾何的な(すなわち幅 0 の)外形線も含まれる。 ◎ The fill property paints the interior of the given graphical element. The area to be painted consists of any areas inside the outline of the shape. To determine the inside of the shape, all subpaths are considered, and the interior is determined according to the rules associated with the current value of the fill-rule property. The zero-width geometric outline of a shape is included in the area to be painted.

~fill演算は、`開な下位path$も~fillする — [ 下位pathの最後の点から下位pathの最初の点まで接続する,追加的な `~closepath$pC ~command ]を~pathに追加した上で、~fill演算を遂行するかのように。 したがって,~fill演算は、 `path$e 要素の中の`開な下位path$(すなわち,~closepath~commandを伴わない下位path)にも, `polyline$e 要素にも適用される。 ◎ The fill operation fills open subpaths by performing the fill operation as if an additional "closepath" command were added to the path to connect the last point of the subpath with the first point of the subpath. Thus, fill operations apply to both open subpaths within ‘path’ elements (i.e., subpaths without a closepath command) and ‘polyline’ elements.

13.4.2. 巻数~規則: `fill-rule^p ~prop

◎名 `fill-rule@p ◎値 `nonzero^v | `evenodd^v ◎初 `nonzero^v ◎適 `図形~要素$, `~text内容~要素$ ◎継 される ◎百 受容しない ◎算 指定された~keyword ◎ア 離散的 ◎表終

`fill-rule$p ~propは、~canvas上のどの部分が図形の内側に含まれるかを決定する~algo( `巻数~規則^em )を指示する。 単純な交差していない~pathにおいては、どの領域が “内側” にあるかは直感的に明瞭である。 しかしながら,より複階的な~path — 自身に交差している~pathや ある下位pathが別の下位pathを封入している~pathなど — における “内側” の解釈は、それほど明らかではない。 ◎ The fill-rule property indicates the algorithm (or winding rule) which is to be used to determine what parts of the canvas are included inside the shape. For a simple, non-intersecting path, it is intuitively clear what region lies "inside"; however, for a more complex path, such as a path that intersects itself or where one subpath encloses another, the interpretation of "inside" is not so obvious.

それを明らかにするため、まず,所与の点の “巻き数” が次に従って定義される:

  1. まず,点から無限遠へ射線を描く。 どの方向でも用を為すが、図形を成す ある`~path区分$に~~重なるか接する場合には,そうならないよう射線を選び直す。
  2. 巻き数は、点から見て,図形を成す~path区分たちが[ 射線の左から右へ交わる回数 ]から[ 射線の右から左へ交わる回数 ]を減算した結果とする。
◎ ↓↓

`fill-rule$p ~propは、図形の内側を決定する方法として,次の 2 つの~optionを供する: ◎ The fill-rule property provides two options for how the inside of a shape is determined:

`nonzero^v
この規則においては、~canvas上の点は、その “巻き数” に応じて, 0 でないならば~pathの外側にあるとされ, 0 ならば内側にあるとされる。 ◎ This rule determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.\

`nonzero^v 規則の図解: ◎ The following drawing illustrates the nonzero rule:

`fillrule-nonzero^dgm
~pathを成すある下位pathが[ 自身に交差している/別の下位pathに封入されている ]ときの, `nonzero^v ~fill規則による効果。 ◎ The effect of a nonzero fill rule on paths with self-intersections and enclosed subpaths.
`evenodd^v
この規則においては、~canvas上の点は、その “巻き数” に応じて,奇数ならば ~pathの内側にあるとされ,偶数ならば外側にあるとされる。 ◎ This rule determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.

`evenodd^v 規則の図解: ◎ The following drawing illustrates the evenodd rule:

`fillrule-evenodd^dgm
~pathを成すある下位pathが[ 自身に交差している/別の下位pathに封入されている ]ときの, `evenodd^v ~fill規則による効果。 ◎ The effect of an evenodd fill rule on paths with self-intersections and enclosed subpaths.

◎ The above descriptions do not specify what to do if a path segment coincides with or is tangent to the ray. Since any ray will do, one may simply choose a different ray that does not have such problem intersections.

13.4.3. ~fillによる塗りの不透明度: `fill-opacity^p ~prop

◎名 `fill-opacity@p ◎値 `opacity$tp ◎初 `1^v ◎適 `図形~要素$, `~text内容~要素$ ◎継 される ◎百 受容しない ◎算 指定された値を実数に換算して, 0 以上 1 以下の範囲に切詰めた結果 ◎ the specified value converted to a number, clamped to the range [0,1] ◎ア 算出d値の型による ◎表終

`fill-opacity$p は、現在の~objを~fillで塗るときに利用される塗ng演算の不透明度を指定する(`図形と~textの塗ng$secを見よ)。 ◎ fill-opacity specifies the opacity of the painting operation used to paint the fill the current object. (See Painting shapes and text).

`number$t
当の~fillの不透明度を与える。 範囲 0 (全部的に透明)〜 1 (全部的に不透明)の外側にある値は、この範囲に切詰められるモノトスル。 ◎ The opacity of the fill. Any values outside the range 0 (fully transparent) to 1 (fully opaque) must be clamped to this range.
`percentage$t
範囲 0 〜 1 の百分率として表出される,~fillの不透明度を与える。 ◎ The opacity of the fill expressed as a percentage of the range 0 to 1.

注記: ~group不透明度を指定する `opacity$p ~propも見よ。 ◎ See also the opacity property, which specifies group opacity.

13.5. 各種~stroke~prop

~SVG-2要件: ~non-scaling~stroke( `non-scaling-stroke$v )を~supportする。 ◎ SVG 2 Requirement: Support non-scaling stroke.

  • 解決: ~SVG-2は、~non-scaling~strokeを含むこととする( `http://www.w3.org/2011/10/28-svg-irc#T17-46-34$refer )。 ~SVG-2は、 `vector-effect$p ~propを備えるとする( `http://www.w3.org/2012/02/02-svg-minutes.html#item05$refer )。 ◎ Resolutions: SVG 2 will include non-scaling stroke. SVG 2 will have the ‘vector-effect’ property.
  • 目的: ~pageを~zoomしても幅は変化しない~strokeを~supportする — 例えば,地図にて共通的な。 ◎ Purpose: To support strokes whose width does not change when zooming a page, as common for example in maps.
  • Owner: Chris or Erik (no action)
  • 注記: これは、より汎用な~non-scaling特能の一部を成し得ることに注意。 ◎ Note: Note that this could be part of more generic non-scaling features.

この節では、[ 次に挙げるものも含め,~strokeの各種~側面を制御することを,作者に許容する ]ような,いくつかの~propを定義する ⇒# 塗り, ~stroke線~幅, ~dash法の利用, ~path区分の継ぎ法, ~path区分の~cap法 ◎ In this section, we define a number of properties that allow the author to control different aspects of a stroke, including its paint, thickness, use of dashing, and joining and capping of path segments.

すべての事例において、方向性に影響されるすべての~stroke法~prop — ~dash~patternに関わるものなど — は、[ 当の~stroke演算は,当の~graphics要素が開始する所と同じ点から開始する ]ように描画されるモノトスル。 特に, `path$e 要素に対しては、~pathの始端は,先頭の`~moveto$pC ~commandを成す最初の点になる。 ◎ In all cases, all stroking properties which are affected by directionality, such as those having to do with dash patterns, must be rendered such that the stroke operation starts at the same point at which the graphics element starts. In particular, for ‘path’ elements, the start of the path is the first point of the initial "moveto" command.

~stroke法~propのうち,~dash~patternなど[ 算出が~graphics要素の外形線に沿う進捗に依存する ]ものに対しては、~SVG~UAの標準な`~pathに沿う距離$を用立てるため,距離~計算が要求される。 ◎ For stroking properties such as dash patterns whose computations are dependent on progress along the outline of the graphics element, distance calculations are required to utilize the SVG user agent's standard Distance along a path algorithms.

~gradientや~patternなどの複階的な塗り~serverを利用して~stroke演算を遂行するときは、次により生じる結果と一致させるモノトスル ⇒ [[ 現在の~graphics要素, それに結付けられている~stroke法~prop ]が成す幾何により定義される幾何的な図形 ]を等価な `path$e 要素に変換してから,所与の塗り~serverを利用して~fillした。 ◎ When stroking is performed using a complex paint server, such as a gradient or a pattern, the stroke operation must be identical to the result that would have occurred if the geometric shape defined by the geometry of the current graphics element and its associated stroking properties were converted to an equivalent ‘path’ element and then filled using the given paint server.

13.5.1. ~strokeによる塗りの指定-法: `stroke^p ~prop

◎名 `stroke@p ◎値 `paint$t ◎初 `none^v ◎適 `図形~要素$, `~text内容~要素$ ◎継 される ◎百 受容しない ◎算 指定d値 — ただし, `color$t 値は算出され, `url$t 値は絶対~化される ◎ as specified, but with <color> values computed and <url> values made absolute ◎ア 算出d値の型による ◎表終

`stroke$p ~propは、所与の~graphicな要素の外形線に沿って塗る。 ◎ The stroke property paints along the outline of the given graphical element.

注記: `path$e 要素を~strokeするときは、線を描く~command(暗黙的な`~lineto$pC )が後続していない`~moveto$pC ~commandのみからなる下位pathは,~strokeされなくなることに注意。 `M 10,10 L 10,10^v や `M 30,30 Z^v など,他の長さ 0 の下位pathも、 `stroke-linecap$p ~propの値が `butt^v の場合には,~strokeされなくなる。 ~pathを成す~strokeの算出-法の詳細は、下に与える`~stroke図形$の定義を見よ。 ◎ Note that when stroking a ‘path’ element, any subpath consisting of a moveto but no following line drawing command will not be stroked. Any other type of zero-length subpath, such as 'M 10,10 L 10,10' or 'M 30,30 Z' will also not be stroked if the stroke-linecap property has a value of butt. See the definition of the stroke shape below for the details of computing the stroke of a path.

~SVG-2要件: ~stroke位置を指定する仕方を含める。 ◎ SVG 2 Requirement: Include a way to specify stroke position.

  • 解決: ~SVG-2は、~stroke位置を指定する仕方を含めるモノトスル( `http://www.w3.org/2011/10/28-svg-irc#T18-09-48$refer )。 ◎ Resolution: SVG 2 shall include a way to specify stroke position.
  • 目的: ~pathの内側/外側だけ描く~strokeも許容する。 ◎ Purpose: To allow a stroke to be inside or outside the path.
  • Owner: Cameron (`3162$ACTION)
  • 注記: 提案~page を見よ。 ◎ Note: See proposal page.

13.5.2. ~strokeによる塗りの不透明度: `stroke-opacity^p ~prop

◎名 `stroke-opacity@p ◎値 `opacity$tp ◎初 `1^v ◎適 `図形~要素$, `~text内容~要素$ ◎継 される ◎百 受容しない ◎算 指定された値を実数に換算して, 0 以上 1 以下の範囲に切詰めた結果 ◎ the specified value converted to a number, clamped to the range [0,1] ◎ア 算出d値の型による ◎表終

`stroke-opacity$p ~propは、現在の~objを~strokeするために利用される塗ng演算の不透明度を指定する(`図形と~textの塗ng$secを見よ)。 `fill-opacity$p と同様に: ◎ The stroke-opacity property specifies the opacity of the painting operation used to stroke the current object. (See Painting shapes and text.) As with fill-opacity.

`number$t
~strokeの不透明度。 範囲 0 (全部的に透明)〜 1 (全部的に不透明)の外側にある値は、この範囲に切詰めるモノトスル。 ◎ The opacity of the stroke. Any values outside the range 0 (fully transparent) to 1 (fully opaque) must be clamped to this range.
`percentage$t
範囲 0 〜 1 の百分率として表出される,~strokeの不透明度。 ◎ The opacity of the stroke expressed as a percentage of the range 0 to 1.

注記: ~group不透明度を指定する `opacity$p ~propも見よ。 ◎ See also the opacity property, which specifies group opacity.

13.5.3. ~stroke幅: `stroke-width^p ~prop

◎名 `stroke-width@p ◎値 `length-percentage$t | `number$t ◎初 `1px^v ◎適 `図形~要素$, `~text内容~要素$ ◎継 される ◎百 現在の~SVG表示域の`正規化-済み対角線長さ$を基準にする ◎ refer to the normalized diagonal of the current SVG viewport (see Units) ◎算 絶対~長さ/百分率 — 実数は先ず絶対~長さに換算される ◎ an absolute length or percentage, numbers converted to absolute lengths first ◎ア 算出d値の型による ◎表終

この~propは、現在の~obj上の `~stroke幅@ (~strokeの太さ)を指定する。 値を 0 にすると,~strokeは塗られなくなる。 負な値は`無効な値$とする。 `number$t 値は、`利用元~単位$における値を表現する。 ◎ This property specifies the width of the stroke on the current object. A zero value causes no stroke to be painted. A negative value is invalid. A <number> value represents a value in user units.

13.5.4. ~strokeの両端に描く~cap: `stroke-linecap^p ~prop

◎名 `stroke-linecap@p ◎値 `butt^v | `round^v | `square^v ◎初 `butt^v ◎適 `図形~要素$, `~text内容~要素$ ◎継 される ◎百 受容しない ◎算 指定された~keyword ◎ア 離散的 ◎表終

`stroke-linecap$p は、~pathが~strokeされるときに[ `開な下位path$の両端 / 長さ 0 の下位pathを成す唯一の点 ]に描かれる図形を指定する。 アリな値は: ◎ stroke-linecap specifies the shape to be used at the end of open subpaths when they are stroked, and the shape to be drawn for zero length subpaths whether they are open or closed. The possible values are:

`butt^v
この値は、どの下位pathも,~strokeは端点を超えて延伸しない(両端に図形は描かない)ことを指示する。 したがって、長さ 0 の下位pathは~strokeされなくなる。 ◎ This value indicates that the stroke for each subpath does not extend beyond its two endpoints. A zero length subpath will therefore not have any stroke.
`round^v
各[ `開な下位path$ / 長さ 0 の下位path ]に対し、その~strokeを表現している図形の両端を,[ 直径が`~stroke幅$に等しい半円 ]で延伸することを指示する(直径を成す辺が端点にて下位pathに直交する)。 ◎ This value indicates that at each end of each subpath, the shape representing the stroke will be extended by a half circle with a diameter equal to the stroke width.\
長さ 0 の下位path(`閉な下位path$も含む)に対する効果は、両端の半円が併わさったかのように,下位pathを成す唯一の点を中心とする真円のみになる。 ◎ If a subpath, whether open or closed, has zero length, then the resulting effect is that the stroke for that subpath consists solely of a full circle centered at the subpath's point.
`square^v
各[ `開な下位path$ / 長さ 0 の下位path ]に対し、その~strokeを表現している図形の両端を,[ 辺の長さが`~stroke幅$に等しい正方形を半分に割った矩形 ]で延伸することを指示する(矩形の長辺が端点にて下位pathに直交する)。 ◎ This value indicates that at the end of each subpath, the shape representing the stroke will be extended by a rectangle with the same width as the stroke width and whose length is half of the stroke width.\

長さ 0 の下位path(`閉な下位path$も含む)に対する効果は、両端の矩形が併わさったかのように,中心が下位pathを成す唯一の点に一致する正方形のみになる — 各~辺が 下位pathを成す唯一の点における有効な接線†に平行または垂直な。

【† おそらく,下位pathの(終端または)`始端における方向$(すなわち、~x軸~正方向になる)か, その点までの`~pathに沿う距離$における`~pathの方向$(すなわち、前後の下位pathの方向に基づく)を意味する(どちらが意図されているのかは不明)。 原文は,これに関して`~path実装~上の注記$secを参照しているが、適用-可能な記述は見当たらない。 】

◎ If a subpath, whether open or closed, has zero length, then the resulting effect is that the stroke for that subpath consists solely of a square with side length equal to the stroke width, centered at the subpath's point, and oriented such that two of its sides are parallel to the effective tangent at that subpath's point. See ‘path’ element implementation notes for details on how to determine the tangent at a zero-length subpath.
`linecap^dgm
3 種の~cap。 ◎ The three types of line caps.

~capを成す図形のより精確な記述は、下に与える`~cap図形$の定義を見よ。 ◎ See the definition of the cap shape below for a more precise description of the shape a line cap will have.

13.5.5. 線継ぎの制御-法: `stroke-linejoin^p, `stroke-miterlimit^p ~prop

`stroke-linejoin$p ~prop用の値[ `miter-clip^v / `arcs^v ]は、~risk下にある。 既知な~browser実装はまだ無い。 Github issue #592 を見よ。 ◎ The values miter-clip and arcs of the stroke-linejoin property are at risk. There are no known browser implementations. See issue Github issue #592.

◎名 `stroke-linejoin@p ◎値 `miter^v | `miter-clip^v | `round^v | `bevel^v | `arcs^v ◎初 `miter^v ◎適 `図形~要素$, `~text内容~要素$ ◎継 される ◎百 受容しない ◎算 指定された~keyword ◎ア 離散的 ◎表終

`stroke-linejoin$p は、~pathや基本~図形が~strokeされるときの各~隅に利用される図形を指定する。 更なる詳細は、`~path実装~上の注記$secを見よ。 ◎ stroke-linejoin specifies the shape to be used at the corners of paths or basic shapes when they are stroked. For further details see the path implementation notes.

【以降では、次の幾何-用語が利用される:】

継ぎ点( `join point^en / `join^en )
下位pathを成す連続する 2 つの`~path区分$に挟まれた頂点(この用語は、前後の~path区分の~~存在を含意する)。
優角
劣角
継ぎ点における優角は、前後の`~path区分$が継ぎ点において両~側に成す角のうち,角度(継ぎ点における両~path区分の接線が成す角度)が小さくない方( 180 度~以上の方), またはその角度を指す。 劣角は優角の反対側を指す(両~角度の合計は常に 360 度)。 両~角度が等しい場合(すなわち,両~path区分は継ぎ点で滑らかにつながっている)、角度としては 一意に決まるが( 180 度),どちらの側を指すかは不定になる。 【優角, 劣角に直に対応する英単語(または句)は無い(例えば優角側は、原文では `outer^en (外縁)などの語で表現されている)。】

各種 値の意味は:

`miter^v
角張った隅を`~path区分$の継ぎに利用することを指示する。 隅は、継ぎ点の前後の優角側~stroke辺を交差するまで真直ぐに延伸することにより形成される。 `stroke-miterlimit$p を超過した場合、線継ぎは `bevel^v に~fall-backする(下を見よ)。 ◎ This value indicates that a sharp corner is to be used to join path segments. The corner is formed by extending the outer edges of the stroke at the tangents of the path segments until they intersect. If the stroke-miterlimit is exceeded, the line join falls back to bevel (see below).
`miter-clip^v
`miter^v と同じ図形を利用することを指示するが、 `stroke-miterlimit$p を超過した場合,~miterは継ぎ点から[ `stroke-miterlimit$p 値 ~DIV 2 ~MUL `~stroke幅$ ]に等しい距離で切取られる(下を見よ)。 ◎ This value is the same as miter but if the stroke-miterlimit is exceeded, the miter is clipped at a distance equal to half the stroke-miterlimit value multiplied by the stroke width from the intersection of the path segments (see below).
`round^v
丸まった隅を`~path区分$の継ぎに利用することを指示する。 継ぎ図形は、継ぎ点を中心とする扇形になる。 ◎ This value indicates that a round corner is to be used to join path segments. The corner is a circular sector centered on the join point.
`bevel^v
面取りされた隅を`~path区分$の継ぎに利用することを指示する。 継ぎ図形は、継ぎ点の前後の~path区分が~strokeされる区画の合間を~fillする三角形になる。 ◎ This value indicates that a bevelled corner is to be used to join path segments. The bevel shape is a triangle that fills the area between the two stroked segments.
`arcs^v
円弧で伸ばした隅を`~path区分$の継ぎに利用することを指示する。 継ぎ図形は、継ぎ点の前後の優角側~stroke辺を[ 継ぎ点におけるそれらの辺と同じ曲率の円弧 ]で延伸することにより形成される。 ◎ This value indicates that an arcs corner is to be used to join path segments. The arcs shape is formed by extending the outer edges of the stroke at the join point with arcs that have the same curvature as the outer edges at the join point.

注記: 値 `miter-clip^v, `arcs^v は、~SVG-2にて新たに~~導入された。 `miter-clip^v 値は、~pathに複数の継ぎ点があるときに より一貫した呈示を提供し,~pathが~animateされるときに より良い挙動を提供する。 値 `arcs^v は、`~path区分$が曲線の場合に継ぎ図形の見かけをより良くする。 ◎ The miter-clip and arcs values are new in SVG 2. The miter-clip value offers a more consistent presentation for a path with multiple joins as well as better behavior when a path is animated. The arcs value provides a better looking join when the path segments at the join are curved.

`arcs^v 線継ぎの追加ngは、 Rigi Kaltbad ~group会合にて解決された( `http://www.w3.org/2012/09/19-svg-minutes.html#item08$refer )。 ◎ Adding 'arcs' line join was resolved at the Rigi Kaltbad group meeting.

`miter-clip^v 線継ぎの追加ngは、 Sydney(2015)~group会合にて解決された( `http://www.w3.org/2015/02/12-svg-minutes.html#item03$refer )。 ◎ Adding 'miter-clip' line join was resolved at the Sydney (2015) group meeting.

`linejoin-four^dgm
4 種の線継ぎ。 ◎ Four types of line joins.
◎名 `stroke-miterlimit@p ◎値 `number$t ◎初 `4^v ◎適 `図形~要素$, `~text内容~要素$ ◎継 される ◎百 受容しない ◎算 指定された実数 ◎ア 算出d値の型による ◎表終

`stroke-linejoin$p に値[ `miter^v / `miter-clip^v / `arcs^v ]が指定されている場合、継ぎ点における劣角が小さいほど継ぎ図形による拡幅量は大きくなり,~pathの`~stroke幅$を大きく超えるまでになり得る。 `stroke-miterlimit$p は、この拡幅量に上限を課す。 ◎ When two line segments meet at a sharp angle and a value of miter, miter-clip, or arcs has been specified for stroke-linejoin, it is possible for the join to extend far beyond the thickness of the line stroking the path. The stroke-miterlimit imposes a limit on the extent of the line join.

`number$t
[ `miter^v / `miter-clip^v / `arcs^v ]線継ぎ用の `~miter上限@ 値を与える。 それは、~strokeの拡幅量を,次が満たされるように制限する ⇒ `~miter長さ$ ~LTE `~miter上限$ ~MUL `~stroke幅$ ◎ The limit on the extent of a miter, miter-clip, or arcs line join as a multiple of the stroke-width value.\
負な値は、`無効な値$であり,`無視する$モノトスル。 ◎ A negative value for stroke-miterlimit is invalid and must be ignored.

注記: 以前の~versionの~SVG仕様は, 0 〜 1 の値も~errorになると言明していたが、~UAの~CSS構文解析器は,きちんと実装していなかった。 実施においては、どの~miter継ぎも 0 〜 1 の`~miter上限$を超過することになるが。 ◎ Previous versions of the SVG specification also stated that values between 0 and 1 were in error, but this was not well implemented by user agent's CSS parsers. In practice, any miter join will exceed a miter limit between 0 and 1.

継ぎ点における `~miter長さ@ は、`利用元~座標系$における,継ぎ点における劣角 ~theta に対し,次で計算される: ◎ For the miter or the miter-clip values, given the angle θ between the segments in user coordinate system, the miter length is calculated by:

`~miter長さ$ ~EQ `~stroke幅$ ~DIV `sin^op( ~theta ~DIV 2 ) 【常に~stroke幅~以上, ~theta が 0 ならば無限大になる】 ◎ miter length = stroke-width / sin(theta / 2)

注記: 歴史的に,`~miter長さ$は、~stroke図形の劣角側の隅から優角側の隅(~miterの頭頂)までの距離として定義されていた。 実施において この定義に従っているのは、`~path区分$が真直ぐな場合に限られる。 上による角度に基づく~miter長さの定義は、継ぎ点の前後の~path区分の継ぎ点における接線のみに依存し,曲率には依存しないので、真直ぐでない~path区分とも整合する。 この定義に整合するよう、~SVG-2にて~~導入した[ `miter-clip^v / `arcs^v ]に対しても,`~miter上限$による拡幅量の上限は同じに定義されている。 ◎ Historically, the miter length is defined as the distance from the inside stroke edge of the intersecting path segments to the tip of the miter. In practice, this is followed only for straight path segments. The above definition of miter length based on angles depends only on the tangents to the path segments at the join and thus gives consistent results independent of the curvature of the path segments. To be consistent with this definition, the clipping point of the miter-clip and arcs line joins is at a distance or arc length equal to half the stroke-miterlimit times the stroke width from the point the two path segments join.

`miter-limit-def^dgm
図~左: `~miter長さ$の歴史的な定義。 図~右: 継ぎ点における前後の`~path区分$の接線はそれぞれ同じ,異なる 2 本の~path。 ~miter継ぎの( `bevel^v に, または~miter上限で切取るように~fallbackするときの)挙動は、両~pathとも同じになる。 それは、~stroke図形の劣角側の 2 辺が交差する位置には依存しない。 ◎ Left: Historical definition of miter length. Right: Two different paths with the same tangents to the path at the point where the path segments join. The behavior of the miter join (fallback to bevel or clipping position) is the same for both paths. It does not depend on the position where the inside stroked edges intersect.

[ `~miter長さ$ ~DIV `~stroke幅$ ]が`~miter上限$を超過する場合、 `stroke-linejoin$p の値に応じて: ◎ If the miter length divided by the stroke width exceeds the stroke-miterlimit then for the value:

`miter^v
継ぎは `bevel^v に変換される。 ◎ the join is converted to a bevel;
`miter-clip^v
~miterは、[ 継ぎ点から優角側へ距離[ `~miter上限$ ~MUL `~stroke幅$ ~DIV 2 ]の所で[ 継ぎ点の優角を二等分する線 ]に直交する線で切取られる。 ◎ the miter is clipped by a line perpendicular to the line bisecting the angle between the two path segments at a distance of half the value of miter length from the intersection of the two path segments.
`miter-limit^dgm
`stroke-miterlimit$p を超過したときの線継ぎに対する効果。 ~~緑黄色の破線は、 `stroke-miterlimit$p 値が 3 のときの`~miter上限$を表す位置を示す。 ~~灰色の領域は、`~miter上限$が無い場合に継ぎ図形がどの様な見かけになるかを示す。 ◎ Effect on line join when stroke-miterlimit is exceeded. The olive-green dashed lines shows the position of the miter limit when the stroke-miterlimit value is 3. The gray regions shows what the joins would look like without a miter limit.
`arcs^v
`arcs^v 値~用の`~miter長さ$は、真円な弧に沿って計算される — この真円は、[ 継ぎ点の優角を二等分する線 ]に継ぎ点で接する, かつ継ぎ図形の先端を通るものとして決定される。 線継ぎは、継ぎ点から[ `~miter上限$ ~MUL `~stroke幅$ ~DIV 2 ]に等しい円弧~長さの所で この円弧に直交する線で切取られる。 ◎ For the arcs value, the miter length is calculated along a circular arc that is tangent to the line bisecting the angle between the two segments at the point the two segments intersect and passes through the end point of the join. The line join is clipped, if necessary, by a line perpendicular to this arc at an arc length from the intersection point equal to half the value of the stroke-miterlimit value multiplied by the stroke width.
`stroke-miterlimit^p による `arcs^v 線継ぎに対する効果は、 Sydney(2015)~group会合にて解決された( `http://www.w3.org/2015/02/12-svg-minutes.html#item12$refer )。 ◎ The effect of 'stroke-miterlimit' on an 'arcs' line join was resolved at Sydney (2015) group meeting.

線継ぎを成す図形のより精確な記述は、下の`線継ぎ図形$の定義を見よ。 ◎ See the definition of the line join shape below for a more precise description of the shape a line join will have.

13.5.6. ~strokeの~dash法: `stroke-dasharray^p, `stroke-dashoffset^p ~prop

◎名 `stroke-dasharray@p ◎値 `none^v | `dasharray$t ◎初 `none^v ◎適 `図形~要素$, `~text内容~要素$ ◎継 される ◎百 現在の~SVG表示域の`正規化-済み対角線長さ$を基準にする ◎ refer to the normalized diagonal of the current SVG viewport (see Units) ◎算 指定された~keyword/[ 絶対~長さ/百分率 ]からなる~list — 実数は,先ず絶対~長さに換算される ◎ as comma separated list of absolute lengths or percentages, numbers converted to absolute lengths first, or keyword specified ◎ア 注釈文を見よ ◎表終

`dasharray^t の構文は: ◎ where:

`dasharray@t = [ [ `length-percentage$t | `number$t ]+ ]#

`stroke-dasharray$p ~propは、~pathの~strokeを成す図形を形成するときに利用される,一連の[ ~dash, ~gap ]が成す~patternを制御する。 ◎ The stroke-dasharray property controls the pattern of dashes and gaps used to form the shape of a path's stroke.

`none^v
~dash法は利用しないことを指示する。 ◎ Indicates that no dashing is used.
`dasharray$t
利用する~dash法~patternを指定する。 `dasharray$t は、[ 1 個~以上の空白, または前後に 0 個~以上の空白がある~comma ]で区切られた[ `number$t / `length-percentage$t ]値の~listである。 `number$t 値は、`利用元~単位$における値を表現する。 ◎ Specifies a dashing pattern to use. A <dasharray> is a list of comma and/or white space separated <number> or <length-percentage> values. A <number> value represents a value in user units.\
~listを成す各~値は、~pathに沿って~strokeを[ 塗る( `~dash^em の場合)/塗らない( `~gap^em の場合) ]ことになる長さを指定する。 奇数個目の値は~dashの長さを指定し,偶数個目の値は各~dashの合間を成す~gapの長さを指定する。 ~listを成す値が奇数個ある場合、偶数~個の値を得るために繰返される(したがって, `stroke-dasharray: 5,3,2^css による描画の挙動は、 `stroke-dasharray: 5,3,2,5,3,2^css と等価になる。) ◎ Each value specifies a length along the path for which the stroke is to be painted (a dash) and not painted (a gap). The first value and every second value in the list after it specifies the length of a dash, and every other value specifies the length of a gap between the dashes. If the list has an odd number of values, then it is repeated to yield an even number of values. (Thus, the rendering behavior of stroke-dasharray: 5,3,2 is equivalent to stroke-dasharray: 5,3,2,5,3,2.)
結果の偶数~個の値からなる~dash法~patternは、~pathに沿って繰返すように塗られる。 ~dash法~patternは、各 下位pathごとに,その始端にて設定し直され再び始まる。 ◎ The resulting even-length dashing pattern is repeated along each subpath. The dashing pattern is reset and begins again at the start of each subpath.
~listを成すある値が負である場合、 `dasharray$t は`無効な値$になる。 ~listを成すすべての値が 0 の場合、~strokeは,~dash法を伴わないベタ線として描画される。 ◎ If any value in the list is negative, the <dasharray> value is invalid. If all of the values in the list are zero, then the stroke is rendered as a solid line without any dashing.
`dashes^dgm
~dash化~stroke。 ~dash法~patternは `20,10^v にされている。 ~~赤い線は~strokeされる実際の~pathを示す。 ◎ A dashed stroke. The dashing pattern is 20,10. The red line shows the actual path that is stroked.

`path$e 要素~上の `pathLength$a 属性は、 `stroke-dasharray$p に影響する: 各~dash, ~gapの長さは、 `pathLength$a に指定された作者による~path長さに相対的に解釈される。 ◎ The ‘pathLength’ attribute on a ‘path’ element affects stroke-dasharray: each dash and gap length is interpreted relative to the author's path length as specified by ‘pathLength’.

`stroke-dasharray$p 値は`加法的でない$。 補間用には, `stroke-dasharray$p 値は,次に従って結合される: ◎ stroke-dasharray values are not additive. For interpolation, stroke-dasharray values are combined as follows:

[ 値a, 値b ]どちらかが[ `none^v に算出される/妥当でない ]場合: ◎ If either start or end compute to none or are invalid
[ 値a, 値b ]は離散的な~animation型を利用して結合される。 ◎ start or end are combined using the discrete animation type.
他の場合: ◎ Otherwise
~dash~patternを成す[ 値a, 値b ]両~値~listを,それらを成す~itemの個数が合致するまで繰返してから、各~itemを,算出d値により結合する。 ◎ repeat both dash patterns of start and end value list until the length of elements in both value lists match. Each item is then combined by computed value.

次の例における 2 つの `stroke-dasharray$p 値~listを成す~itemの個数は異なる: ◎ The two stroke-dasharray value lists in the following example have different number of elements:

path {
  stroke-dasharray: 20 40 10;
}

path:hover {
  transition-property: stroke-dasharray;
  transition-duration: 0.5s;
  stroke-dasharray: 40 20;
}

2 つの値~listを補間するときは、先ず,両~listの~dash~patternが繰返される: ◎ To interpolate the two value lists the dash pattern gets repeated on both lists first:

stroke-dasharray: 20 40 10 20 40 10;
stroke-dasharray: 40 20 40 20 40 20;

次に、各~itemが算出d値により結合される。 ◎ After that, each item is then combined by computed value.

◎名 `stroke-dashoffset@p ◎値 `length-percentage$t | `number$t ◎初 `0^v ◎適 `図形~要素$, `~text内容~要素$ ◎継 される ◎百 現在の~SVG表示域の`正規化-済み対角線長さ$を基準にする ◎ refer to the normalized diagonal of the current SVG viewport (see Units) ◎算 絶対~長さ/百分率 — 実数は、先ず絶対~長さに換算される ◎ an absolute length or percentage, numbers converted to absolute lengths first ◎ア 算出d値の型による ◎表終

`stroke-dashoffset$p ~propは、[ `stroke-dasharray$p に指定された~dash~patternを,~pathの進行方向の逆方向へずらす距離 ]を指定する。 値が負である場合、~pathの進行方向へずらすことになる。 (~patternは両方向へ際限なく繰返されるので、どれだけずらそうが~path全体に現れる。) ◎ The stroke-dashoffset property specifies the distance into the repeated dash pattern to start the stroke dashing at the beginning of the path. If the value is negative, then the effect is the same as dash offset d: ◎ d = s - (abs(stroke-dashoffset) mod s) ◎ where s is the sum of the dash array values.

【 この段落は、原文を全く別の等価な表現に違えて訳している(素直に訳すと回りくどくなるので) — それに伴い、原文に付記されていた数式も不要になるので省略している。 】

`dashoffset^dgm
0 でない~dash~offsetを伴う~dash化~stroke。 ~dash法~patternは `20,10^v,~dash~offsetは `15^v 。 ~~赤い線は~strokeされる実際の~pathを示す。 ◎ A dashed stroke with a non-zero dash offset. The dashing pattern is 20,10 and the dash offset is 15. The red line shows the actual path that is stroked.

`stroke-dasharray$p と同様に、 `stroke-dashoffset$p は,[ 作者が `path$e 要素~上の `pathLength$a 属性に指定した~path長さ ]に相対的に解釈される。 ◎ Like stroke-dasharray, stroke-dashoffset is interpreted relative to the author's path length as specified by the ‘pathLength’ attribute on a ‘path’ element.

下の例に、実際の~path長さと大きく異なる `pathLength$a を利用して,~stroke~dash法を より容易に制御できる様子を示す。 ◎ The example below shows how a ‘pathLength’ that is greatly different from the actual path length can be used to control stroke dashing more easily.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="300" height="150">
  <defs>
    <path id="p" d="M -50,0 A 50,50 0 0 0 50,0 A 50,50 0 0 0 -50,0 z"
          pathLength="80"/>
    <g id="chip" stroke-width="10">
      <circle cy="5" r="55" fill="#000" fill-opacity="0.15" stroke="none"/>
      <use xlink:href="#p"/>
      <use xlink:href="#p" fill="none" stroke="#eee" stroke-width="10"
           stroke-dasharray="10 10" stroke-dashoffset="5"/>
      <g fill="none" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round">
        <use xlink:href="#p" stroke="#eee" stroke-dashoffset="10"/>
        <use xlink:href="#p" stroke-dashoffset="0"/>
      </g>
      <circle r="40" fill="#000" fill-opacity="0.15"
              stroke-width="2" stroke="white"/>
    </g>
  </defs>
  <rect width="100%" height="100%" fill="#063"/>
  <use xlink:href="#chip" x="140" y="75" fill="#00c" stroke="#00c"/>
  <use xlink:href="#chip" x="160" y="85" fill="#000" stroke="#000"/>
  <use xlink:href="#chip" x="170" y="65" fill="#c00" stroke="#c00"/>
</svg>
`dash-pathlength^dgm
各~chipの~~周にある 4 個の長めの~~白い~dash, 8 個の小さい真円な~dashは、作者が指定した `pathLength$a `80^v に相対的に配置される — これにより、作者は,欲される[ `stroke-dasharray$p, `stroke-dashoffset$p ]値を容易に算出できるようになる。 ◎ The four broad white dashes and the eight small circular dashes around each chip are placed relative to an author specified ‘pathLength’ of '80', which makes the desired stroke-dasharray and stroke-dashoffset values easy to compute.

~pathに沿って~dashが配置されることになる位置のより精確な記述は、下の`~dash位置~list$の定義を見よ。 ◎ See the definition of dash positions below for a more precise description of positions along a path that dashes will be placed.

13.5.7. ~strokeを成す図形の算出-法

~SVG-2要件: ~stroke~dash法をより精確に指定する。 ◎ SVG 2 Requirement: Specify stroke dashing more precisely.

  • 解決: ~SVG-2は、~stroke~dash法をより精確に指定するモノトスル( `http://www.w3.org/2011/10/28-svg-irc#T18-14-14$refer )。 ◎ Resolution: SVG 2 shall specify stroke dashing more precisely.
  • 目的: 基本~図形, ~path区分~上の~dashが開始する点を定義する。 ◎ Purpose: To define dash starting point on basic shapes and path segments.
  • Owner: Cameron (no action)

要素の `~stroke図形@ は、 `stroke$p ~propにより~fillされる図形である。 `text$e 要素は、複数の~chunkにて描画され得るので,各~chunkごとに自前の`~stroke図形$がある。 次の~algoは、~stroke法~propを織り込んで[ `path$e /`基本~図形$/個々の `text$e ~chunk ]の理想的な~stroke図形を述べる。 述べられる理想的な~stroke図形は、最善な事例~実装を定義するが、実装には,処理能の理由からこの記述から逸脱するいくぶんの余地が与えられる。 ◎ The stroke shape of an element is the shape that is filled by the stroke property. Since ‘text’ elements can be rendered in multiple chunks, each chunk has its own stroke shape. The following algorithm describes the ideal stroke shape of a ‘path’, basic shape or individual ‘text’ chunk is, taking into account the stroking properties above. The ideal stroke shape described defines a best case implementation, but implementations are given some leeway to deviate from this description for performance reasons.

注記: 作者は、~strokeを成す図形は,一部の事例では — 曲率が極度に高い曲線~など — ~platform間で相違し得ることを自覚するベキである。 ◎ Authors should be aware that the shape of a stroke may in some cases, such as at extremely tight curves, differ across platforms.

`stroke-tight-corner-render-examples^dgm
~stroke用に塗られる図形が~platform間で相違し得る様子の例。 ◎ An example of how the shape painted for stroke may differ across platforms.

この例は、次の 2 本の~SVG~pathが描画されたときにアリな結果を示している: ◎ The above example shows the possible rendered results for the following two SVG paths:

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<path d="M 1,3 C 8,2 8,6 7,6" stroke-width="4" fill="none" stroke="skyblue"/>
<path d="M 1,3 C 8,2 8,6 7,6" stroke-width="0.075" fill="none" stroke="black"/>
</svg>

所与の`図形~要素$ %要素 — または %要素 が `text$e 要素の場合はそれを成す個々の~chunk — に`等価な~path$ %~path の理想的な~stroke図形は、次に従って決定される: ◎ The ideal stroke shape is determined as follows:

  1. %図形 ~LET 空な図形 ◎ Let shape be an empty shape.
  2. %~stroke幅 ~LET %要素 の`~stroke幅$ ◎ ↓
  3. ~IF[ %~stroke幅 ~EQ 0 ] ⇒ ~RET %図形 ◎ If stroke-width > 0, then:
  4. %拡縮率 ~LET 1 (~dash~pattern用の拡縮-係数) ◎ ↓
  5. ~IF[ %要素 は `text$e 要素でない ]~AND[ %要素 は `pathLength$a 属性を有する ] ⇒ %拡縮率 ~SET [ %要素 上の `pathLength$a 属性の値 ] ~DIV [ ~UAが算出した %~path の長さ ] ◎ Let scale be a scale factor for the dash pattern. If we are computing the stroke shape of a ‘text’ chunk, or if the ‘pathLength’ attribute is not present on the element, then scale is 1. Otherwise, it is determined as follows: • Let length be the user agent's computed length of the ‘path’ or equivalent path for a basic shape. • Let authorlength be the value of the ‘pathLength’ attribute on the shape. • scale is authorlength / length. ◎ Let path be the equivalent path of the element (or the individual chunk of a ‘text’ element).
  6. %~path を成す ~EACH( 下位path %下位path ) に対し: ◎ For each subpath of path:

    1. %位置~list ~LET %下位path 用の`~dash位置~list$ ◎ Let positions be the dash positions for the subpath.
    2. %位置~list を成す ~EACH( ~pair < %始端, %終端 > ) に対し: ◎ For each pair <start, end> in positions:

      1. %始端 ~SET %始端 ~MUL %拡縮率 ◎ ↓
      2. %終端 ~SET %終端 ~MUL %拡縮率 ◎ Scale start and end by scale.
      3. %~dash ~LET 次を満たす点 %P をすべてを含む図形 ⇒ [ `~pathに沿う距離$において %下位path に沿って %始端 から %終端 までにある点 %Q ]が存在して,[ %P は %Q にて %下位path に直交する線~上にある ]~AND[ %Q から %P までの距離 ~LTE %~stroke幅 ~DIV 2 ] ◎ Let dash be the shape that includes, for all distances between start and end along the subpath, all points that lie on the line perpendicular to the subpath at that distance and which are within distance stroke-width of the point on the subpath at that position.
      4. %~dash ~SET 次に挙げる領域の和領域 ⇒# %~dash, 位置 %始端 における %下位path の始端側にある`~cap図形$, 位置 %終端 における %下位path の終端側にある`~cap図形$ ◎ Set dash to be the union of dash and the starting cap shape for the subpath at position start. ◎ Set dash to be the union of dash and the ending cap shape for the subpath at position end.
      5. %~index ~LET %下位path 内の距離 %始端 にある `~path区分$の~index,
      6. %最後の~index ~LET %下位path 内の距離 %終端 にある `~path区分$の~index ◎ Let index and last be the indexes of the path segments in the subpath at distance start and end along the subpath.

        注記: %~index, %最後の~index を選ぶときは,長さ 0 の区分を含めても含めなくてもかまわない。 ◎ It does not matter whether any zero length segments are included when choosing index and last.

      7. ~WHILE[ %~index ~LT %最後の~index ]: ◎ While index < last:

        1. %~dash ~SET [ %~dash, 区分~index %~index にある %下位path 用の`線継ぎ図形$ ]の和領域 ◎ Set dash to be the union of dash and the line join shape for the subpath at segment index index.
        2. %~index ~INCBY 1 ◎ Set index to index + 1.
      8. %図形 ~SET [ %図形, %~dash ]の和領域 ◎ Set shape to be the union of shape and stroke.
  7. ~RET %図形 ◎ Return shape.

ある[ `path$e / `基本~図形$ ]に`等価な~path$を成す,所与の下位path用の `~dash位置~list@ は、一連の~pairからなる~listである — 各~pairは、[ 下位pathの~strokeを形成する各~dash ]用の,下位pathの始端から下位pathに沿って[ ~dashの始端, ~dashの終端 ]までの距離を表現する。 それは、次に従って決定される: ◎ The dash positions for a given subpath of the equivalent path of a ‘path’ or basic shape is a sequence of pairs of values, which represent the starting and ending distance along the subpath for each of the dashes that form the subpath's stroke. It is determined as follows:

  1. %~path長さ ~LET 下位pathの長さ ◎ Let pathlength be the length of the subpath.
  2. %dasharray ~LET %要素 上の `stroke-dasharray$p 値 ◎ ↓↓
  3. ~IF[ %dasharray ~EQ `none^v ] ⇒ ~RET 1 個の~pair <0, %~path長さ > のみからなる~list ◎ ↓↓
  4. %~dash~list ~LET 空~list ◎ Let dashes be\
  5. %dasharray を成す ~EACH( %成分~値 ) に対し ⇒ %~dash~list に %成分~値 を利用元~単位に換算した結果を付加する ◎ the list of values of stroke-dasharray on the element, converted to user units,\
  6. ~IF[ %~dash~list を成す~itemの個数は奇数である ] ⇒ %~dash~list に %~dash~list の複製を連結する ◎ repeated if necessary so that it has an even number of elements; if the property has the value none, then the list has a single value 0.
  7. %個数 ~LET %~dash~list を成す値の個数 ◎ Let count be the number of values in dashes.
  8. %総和 ~LET %~dash~list を成す値の総和 ◎ Let sum be the sum of the values in dashes.
  9. ~IF[ %総和 ~EQ 0 ] ⇒ ~RET 1 個の~pair <0, %~path長さ > のみからなる~list ◎ If sum = 0, then return a sequence with the single pair <0, pathlength>.
  10. %位置~list ~LET 空~list ◎ Let positions be an empty sequence.
  11. %~offset ~LET %要素 上の `stroke-dashoffset$p ~propの値 ◎ Let offset be the value of the stroke-dashoffset property on the element.
  12. %~offset ~SET %~offset `mod^op %総和 ◎ If offset is negative, then set offset to sum − abs(offset). ◎ Set offset to offset mod sum.
  13. %~index ~LET 0 ◎ ↓
  14. %総和 ~SET 0 ◎ ↓
  15. ~WHILE[ %総和 ~LT %~offset ] ⇒# %総和 ~INCBY %~dash~list[ i ]; %~index ~INCBY 1 ◎ Let index be the smallest integer such that sum(dashesi, 0 ≤ i ≤ index) ≥ offset.
  16. %~dash長さ ~LET `min^op( %総和 ~MINUS %~offset, %~path長さ ) ◎ Let dashlength be min(sum(dashesi, 0 ≤ i ≤ index) − offset, pathlength).
  17. %位置 ~LET 0 ◎ ↓
  18. ~WHILE[ %位置 ~LT %~path長さ ]:

    1. %~dash長さ ~LET `min^op( %~dash~list[ %~index ], %~path長さ ~MINUS %位置 )
    2. ~IF[ %~index は偶数である ] ⇒ %位置~list に ~pair < %位置, %位置 ~PLUS %~dash長さ > を付加する
    3. %位置 ~INCBY %~dash長さ
    4. %~index ~INCBY 1
    5. ~IF[ %~index ~EQ %個数 ] ⇒ %~index ~SET 0
    ◎ If index mod 2 = 0, then append to positions the pair <0, dashlength>. ◎ Let position be dashlength. • While position < pathlength: • Set index to (index + 1) mod count. • Let dashlength be min(dashesindex, pathlength − position). • If index mod 2 = 0, then append to positions the pair <position, position + dashlength>. • Set position to position + dashlength.
  19. ~RET %位置~list ◎ Return positions.

下位pathに沿って所与の %位置 にある[ 始端側/終端側 ] `~cap図形@ は、次に従って決定される: ◎ The starting and ending cap shapes at a given position along a subpath are determined as follows:

  1. %P ~LET 下位pathの始端から下位pathに沿って距離 %位置 にある点 ◎ ↓
  2. %断線 ~LET 次をすべて満たすように決定される線 ⇒# %断線 の長さ ~EQ `~stroke幅$, %断線 の中点は %P に一致する, %断線 は %P にて下位pathに直交する ◎ ↓
  3. %向き ~LET [ 始端側~capならば下位pathの進行方向と~~正反対/ 終端側~capならば下位pathの進行方向 ] ◎ ↓
  4. `stroke-linecap$p の値に応じて: ◎ ↓

    `butt^v ◎ If stroke-linecap is butt, then\
    ~RET 空な図形 ◎ return an empty shape.
    `round^v ◎ Otherwise, if stroke-linecap is round, then:
    ~RET 次を満たす半円 ⇒# その直径を成す辺は %断線 に一致する, その弧を成す辺は %P から %向き 側に位置する ◎ If this is a starting cap, then return a semicircle of diameter stroke-width positioned such that: • The subpath that the semicircle is relative to is the subpath starting at distance position. • Its straight edge is parallel to the line perpendicular to the subpath at distance position along it. • The midpoint of its straight edge is at the point that is along the subpath at distance position. • The direction from the midpoint of its arc to the midpoint of its straight edge is the same as the direction of the subpath at distance position. ◎ Otherwise, this is an ending cap. Return a semicircle of diameter stroke-width positioned such that: • The subpath that the semicircle is relative to is the subpath ending at distance position. • Its straight edge is parallel to the line perpendicular to the subpath at distance position along it. • The midpoint of its straight edge is at the point that is along the subpath at distance position. • The direction from the midpoint of its straight edge to the midpoint of its arc is the same as the direction of the subpath.
    `square^v ◎ Otherwise, stroke-linecap is square:
    ~RET 次を満たす長方形 ⇒# 長辺の一方は %断線 に一致する, 短辺の長さ ~EQ 長辺の長さの半分, もう一方の長辺は %P から %向き 側に位置する ◎ If this is a starting cap, then return a rectangle with side lengths stroke-width and stroke-width / 2 positioned such that: • Its longer edges, A and B, are parallel to the line perpendicular to the subpath at distance position along it. • The midpoint of A is at start. • The direction from the midpoint of B to the midpoint of A is the same as the direction of the subpath at distance position along it. ◎ Otherwise, this is an ending cap. Return a rectangle with side lengths stroke-width and stroke-width / 2 positioned such that: • Its longer edges, A and B, are parallel to the line perpendicular to the subpath at distance position along it. • The midpoint of A is at end. • The direction from the midpoint of A to the midpoint of B is the same as the direction of the subpath at distance position along it.
`linecap-construction^dgm
長さ 0 でない 1 本の下位pathからなる~pathにおける, 3 種の `stroke-linecap$p 値の利用。 図上段の[ ~~白っぽい線は ~path自身, ~~太い線は ~stroke, ~~緑黄色の線は ~pathの端点にて接線に直交する線, ~~赤紫色の区画は ~cap ]を指示する。 図下段は、結果の~strokeのみを示す。 ◎ The three different stroke-linecap values used on paths with a single, non-zero length subpath. The white line is the path itself and the thick gray area is the stroke. On the top row, the green lines indicate the perpendicular to the tangent at the path endpoints and the pink areas are the caps. The bottom row shows the stroke without the perpendicular and cap highlighting.

所与の`~path区分$ %区分 用の `線継ぎ図形@ は、次に従って決定される: ◎ The line join shape for a given segment of a subpath is determined as follows:

  1. ~Assert: %区分 は下位pathを成す最後の`~path区分$ではない
  2. %直後の区分 ~LET %区分 の直後の`~path区分$ ◎ ↓
  3. %P ~LET %区分, %直後の区分 に挟まれた継ぎ点 ◎ Let P be the point at the end of the segment.
  4. ~IF[ %区分 の`終端における方向$と %直後の区分 の`始端における方向$は一致する ] ⇒ ~RET 空な図形 ◎ If the unit tangent vector at the end of the segment and the unit tangent vector at the start of the following segment are equal, then return an empty shape.

    注記: これは例えば、 `M 100,100 h 100 h 100^v は 2 本の直線~区分の合間に線継ぎ図形を生産しない一方で, `M 100,100 h 100 h -100^v は生産することを意味する。 ◎ This means for example that 'M 100,100 h 100 h 100' would not produce a line join shape between the two straight line segment, but 'M 100,100 h 100 h -100' would.

  5. %~stroke幅 ~LET %要素 の`~stroke幅$ ◎ ↓
  6. %L1 ~LET 次をすべて満たす位置にある線 ⇒# %P における %区分 の接線に平行である, %P から距離 %~stroke幅 ~DIV 2 だけ離れている, 継ぎ点 %P の優角側にある ◎ Let A be the line parallel to the tangent at the end of the segment. ◎ Let B be the line parallel to the tangent at the start of the following segment. ◎ Let Aleft and Aright be lines parallel to A at a distance of stroke-width / 2 to the left and to the right of A relative to the subpath direction, respectively. ◎ Let Bleft and Bright be lines parallel to B at a distance of stroke-width / 2 to the left and to the right of B, relative to the subpath direction, respectively.
  7. %L2 ~LET %直後の区分 に対し, %L1 と同様に決定される線 ◎ ↑
  8. ( %P1, %P2, %P3 ) ~LET 次に従って決定される 3 個の点 ⇒# %P1 ~SET %L1 上の %P に最も近い点, %P2 ~SET %L2 上の %P に最も近い点, %P3 ~SET %L1, %L2 の交点 ◎ Let P1, P2 and P3 be points determined as follows: • If the smaller angle between A and B is on the right of these lines, considering the direction of the subpath, then P1 and P2 are the points on Aleft and Bleft closest to P, and P3 is the intersection of Aleft and Bleft. • Otherwise, P1 and P2 are the points on Aright and Bright closest to P, and P3 is the intersection of Aright and Bright.
  9. %~bevel領域 ~LET 点 %P, %P1, %P2 から形成される三角形 ◎ Let bevel be the triangle formed from the three points P, P1 and P2.
  10. %継ぎ種別 ~LET `stroke-linejoin$p の値 ◎ ↓
  11. %継ぎ種別 に応じて:

    `bevel^v
    ~RET %~bevel領域 ◎ ↓↓
    `round^v ◎ If stroke-linejoin is round, then\
    ~RET [ %~bevel領域, 次を満たすように決定される扇形 ]の和領域 ⇒# 中心は %P に一致する, 直径 ~EQ %~stroke幅, %P1, %P2 を円弧の両端とする ◎ return the union of bevel and a circular sector of diameter stroke-width, centered on P, and which has P1 and P2 as the two endpoints of the arc.
    `arcs^v ◎ If stroke-linejoin is arcs, then\
    1. %C1 ~LET 次を満たす真円または直線( 下を見よ ) ⇒# %P で %区分 に接する, 曲率 ~EQ %P における %区分 の曲率(曲率 0 の場合は直線になる) ◎ find the circles that are tangent to the stroke edges at P1 and P2 with the same curvature as the edges at those points (see below).
    2. %C1 を %P1 を通るように調整する ⇒ %C1 は真円~ならば 中心はそのままに半径を増減して,直線ならば並進して ◎ ↑
    3. %C2 ~LET %P2, %直後の区分 に対し %C1 と同様に決定される真円または直線 ◎ ↑
    4. ~IF[ %C1, %C2 とも直線である ] ⇒# %継ぎ種別 ~SET `miter-clip^v; ~GOTO `miter-clip^v ◎ If both curvatures are zero fall through to miter-clip.\
    5. ~IF[ %C1, %C2 のどちらかは、[ 直径 ~LT %~stroke幅 ]の真円である ] ⇒ ~GOTO `round^v ◎ If either curvature is greater than 2/(stroke width), fallback to round.\
    6. ~IF[ %C1, %C2 は交差しない ] ⇒ %C1, %C2 のうち真円であるものの半径を, %C1, %C2 が交差するまで等しい量だけ調整する( 下を見よ ) ◎ Extend the stroke edges using these circles (or a line, in the case of zero curvature). If the two circles (or circle and line) do not intersect, adjust the radii of the two circles by an equal amount (or just the circle in case of a circle and line) until they do intersect (see below).\
    7. %P4 ~LET %C1, %C2 の交点 — 2 個ある場合は %P に近い方の ◎ ↓
    8. %線継ぎ領域 ~LET 次により定義される領域 ⇒# %P と %P1 を接続する線, %P と %P2 を接続する線, %C1 を成す %P1 から %P4 までの短い方の弧(または線), %C2 を成す %P2 から %P4 までの短い方の弧(または線) ◎ The line join region is defined by the lines that connect P with P1 and P2 and the arcs defined by the circles (or arc and line) between the closest intersection point to P, and P1 and P2.\
    9. ~RET `stroke-miterlimit$p 節に定義されるように, %線継ぎ領域 から[ `~miter上限$を過ぎて延伸する部分 ]は切取った結果の領域 ◎ Next calculate the miter limit as defined in the stroke-miterlimit section. Clip any part of the line join region that extends past the miter limit. Return the resulting region.\

    曲率は、変形を適用する前の利用元~空間~内で計算することに注意。 ◎ Note that the curvatures are calculated in user-space before any transforms are applied.

    `miter^v
    `miter-clip^v ◎ If stroke-linejoin is miter or miter-clip then\
    1. %線継ぎ領域 ~SET %~bevel領域, [ 点 %P1, %P2, %P3 から形成される三角形 ]の和領域 ◎ the line join region is the union of bevel and the triangle formed from the three points P1, P2 and P3.
    2. ~IF[ %P における`~miter上限$ ~MUL `sin^op( %P における劣角 ~DIV 2 ) ~GTE 1 ] ⇒ ~RET %線継ぎ領域 ◎ Let θ be the angle between A and B. If 1 / sin(θ / 2) ≤ stroke-miterlimit, then return the line join region.
    3. ~IF[ %継ぎ種別 ~EQ `miter-clip^v ] ⇒ ~RET `stroke-miterlimit$p 節に定義されるように, %線継ぎ領域 から[ `~miter上限$を過ぎて延伸する部分 ]は切取った結果の領域 ◎ If stroke-linejoin is miter-clip, then clip any part of the line join region that extends past the miter limit and return this region.
    4. ~RET %~bevel領域 ◎ Return bevel.
`linejoin-construction^dgm
`round^v 線継ぎ図形の構築は、~~赤紫色で示される。 ~~白っぽい線は 継ぎ点の前後の区分を成す元の~path, ~~黒っぽい領域は ~strokeを示す。 ◎ Construction of a round line join shape, shown in pink. The white line is the original path, which has two segments that come to a point, and the gray region is the stroke.
`linejoin-construction-arcs^dgm
`arcs^v 線継ぎ図形の構築は、~~赤紫色で示される。 ~~白っぽい線は 継ぎ点の前後の区分を成す元の~path, ~~黒っぽい領域は ~strokeを示す。 破線は 継ぎ点において各~区分に接する, かつ同じ曲率の真円を示す。 ~~緑黄色の真円(破線の真円と同心)が 継ぎ図形を定義する。 ◎ Construction of an arcs line join shape, shown in pink. The white line is the original path, which has two segments that come to a point, and the dark gray region is the stroke. The dashed lines show circles that are tangent to and have the curvature of the segments at the join. The olive-green circles (concentric with the dashed circles) define the join shape.

13.5.8. `arcs^v `stroke-linejoin^p 用の真円の算出-法

`stroke-linejoin$p が `arcs^v の場合、[ `~path区分$ %区分 の[ 始端/終端 ] %P における %区分 の曲率 ]と同じ曲率の真円(または直線)を見出すことが要求される。 そのためには: ◎ The arcs stroke-linejoin requires finding circles that are both tangent to and have the same curvatures as the outer stroke edges at the ends of path segments. To find one of these circles,\

  1. ~kappa ~LET %P における %区分 の曲率 ~kappa(下を見よ) ◎ first calculate the curvature κ of the path segment at its end (see below).\
  2. ~IF[ ~kappa ~EQ 0 ] ⇒ ~RET %P における %区分 の接線 ◎ ↓
  3. %半径 ~LET 1 ~DIV ~kappa ◎ Next, find the radius of a circle corresponding to this curvature: r = 1/κ.\
  4. %Q ~LET 次を満たす点 ⇒# %P までの距離 ~EQ %半径, %P にて %区分 に~~直交する線~上にある, %区分 の進行方向に向かって %区分 が %P において右に曲がるならば右側/左に曲がるならば左側にある ◎ Increase or decrease the radius by one half of the stroke width to account for the stroke: rc = r ± ½ stroke-width. The center of the circle will be on a line normal to the path end a distance of rc away from the outer stroke edge at the end.
  5. ~RET %Q を中心とする,半径 %半径 の真円 ◎ ↑

曲率 ~kappa は、次で与えられる: ◎ ↓

  • 直線に対しては 0 になる。 ◎ For a line: the curvature is zero. Extend the outer stroke edge by a line.
  • 楕円な弧に対しては: ◎ For an elliptical arc:

    ~kappa( %t ) = ( %rx ~MUL %ry ) ~DIV `pow^op( `norm^op( %rx ~MUL `sin^op(⁡ %t ), %ry ~MUL `cos^op(⁡ %t ) ), 3 ) ◎ $$\kappa(t) = {{r_x r_y}\over{(r_x^2 \sin^2 t + r_y^2 \cos^2 t)^{3/2}}}$$

    ここで: ◎ where:

    • %rx, %ry は順に,~x軸~半径, ~y軸~半径
    • %t ~EQ `arctan^op( %ry ~DIV %rx ~MUL `tan^op( ~theta ) ) ◎ $$t = \arctan \left( {r_y \over r_x} \tan \theta \right)$$
    • `norm^op( %V ) は~vector %V の長さ

    円弧~区分の始端/終端における~parameter ~theta は、 § 楕円な弧の実装~注記 における公式を利用して見出せる(注記:一部の実装は、描画するに先立って楕円な弧を三次~Bezierに変換するので,ここでの等式は必要ないかもしれない)。 ◎ The parameter θ at the beginning or end of an arc segment can be found by using the formulas in the Elliptical arc implementation notes. (Note, some renderers convert elliptical arcs to cubic Béziers prior to rendering so the equations here may not be needed.)

  • 二次~Bezierに対しては: ◎ For a quadratic Bézier:

    ~kappa( 0 ) = ( %V1 ~XP %V2 ) ~DIV `pow^op( `norm^op( %V1 ), 3 ) ~DIV 2 ◎ $$\kappa(0) = {2\over3}{(P_1-P_0)\times((P_0-P_1)+(P_2-P_1))\over|P_1-P_0|^3}$$
    ~kappa( 1 ) = ( %V1 ~XP %V2 ) ~DIV `pow^op( `norm^op( %V2 ), 3 ) ~DIV 2 ◎ $$\kappa(0) = {2\over3}{(P_1-P_0)\times((P_0-P_1)+(P_2-P_1))\over|P_1-P_0|^3}$$

    [ ~kappa(0) / ~kappa(1) ]が,~path区分の[ 始端/終端 ]における有符号†曲率を与える。 ここで:

    • %V1 は始点から制御-点を指す~vector
    • %V2 は制御-点から終点を指す~vector
    • %A ~XP %B は ~vector %A, %B の外積(ウェッジ積)††
    ◎ Where κ(0) and κ(1) are the signed curvatures at the start and end of the path segment respectively, and the P's are the three points that define the quadratic Bézier.

    【† 左右どちらに曲がるかは、曲率の符号から判別できる( ~y軸は下向きなので、負ならば左へ曲がる)。 】【†† 原文では説明なしに記号 ~MUL で記されているが、外積を表すと見受けられる。 外積にはクロス積( ~MUL ), ウェッジ積( ~XP )があるが、前者は二次元~vectorには定義されないので,ここではウェッジ積~用の記号を用いる。 実質的には、[ %A, %B を並べて得られる二次行列の行列式 / %A, %B で定義される平行四辺形の(有符号)面積 / %A, %B を三次元~空間の x-y 平面~内の~vectorと見なす下でクロス積をとった結果の z 成分 ]に等しくなる。 】

  • 三次~Bezierに対しては 【参考:三次~Bezierの曲率の計算-法】 : ◎ For a cubic Bézier:

    ~kappa( 0 ) = ( %V1 ~XP %V2 ) ~DIV `pow^op( `norm^op( %V1 ), 3 ) ~MUL ( 2 ~DIV 3 ) ◎ $$\kappa(0) = {2\over3}{(P_1-P_0)\times((P_0-P_1)+(P_2-P_1))\over|P_1-P_0|^3}$$
    ~kappa( 1 ) = ( %V2 ~XP %V3 ) ~DIV `pow^op( `norm^op( %V3 ), 3 ) ~MUL ( 2 ~DIV 3 ) ◎ $$\kappa(1) = {2\over3}{(P_3-P_2)\times((P_1-P_2)+(P_3-P_2))\over|P_3-P_2|^3}$$

    [ ~kappa(0) / ~kappa(1) ]が,~path区分の[ 始端/終端 ]における有符号~曲率を与える。 ここで:

    • %V1 は始点から始端側の制御-点を指す~vector
    • %V2 は始端側の制御-点から終端側の制御-点を指す~vector
    • %V3 は終端側の制御-点から終点を指す~vector
    ◎ Where κ(0) and κ(1) are the signed curvatures at the start and end of the path segment respectively, and the P's are the four points that define the cubic Bézier.\

%V1, %V3 (二次~Bezierの場合は %V2 )いずれかが長さ 0 の場合(退化している)、曲率は無限になるので, 【曲率が 0 になる場合とは別に】 継ぎ図形を構築する際には直線が利用されるベキであることに注意。 ◎ Note, if P0 and P1, or P2 and P3 are degenerate, the curvature will be infinite and a line should be used in constructing the join.

13.5.9. `stroke-linejoin^p: `arcs^v 用の初期~真円が交差しないときの真円の調整-法

この~fallback用の挙動は、 Sydney 2016 F2F にて解決された( `https://www.w3.org/2016/02/03-svg-minutes.html#item02$refer )。 それは、~fallback状態, そうでない状態の間で滑らかな遷移を与える。 ◎ The fallback behavior was resolved at the Sydney 2016 F2F. It gives a smooth transition between the fallback and non-fallback states.

`stroke-linejoin$p: `arcs^v 用に計算された 2 つの初期~真円が交差しない場合、両~半径を,同じ分量だけ, 2 つの真円がちょうど触れる所まで調整する必要がある(両~真円とも,~offsetされた~pathに接し続けるよう真円の中心を移動しながら)。 考慮する事例は 2 つある: ◎ When the initial circles calculated for the arcs stroke-linejoin do not intersect, they need to be adjusted by changing both radii by the same magnitude (moving the circle centers to keep the circles tangent to the offset paths) until the circles just touch. There are two cases to consider.\

  • 1 つ目の事例は、一方の真円が他方を封入する場合。 この事例では、大きい方の真円の半径は 減らされ,小さい方の真円の半径は 同じ量だけ増やされる: ◎ The first is when one circle encloses the other circle. In this case the larger circle is reduced in size while the smaller circle is increased in size:

    `linejoin-construction-fallback^dgm
    `arcs^v 線継ぎ図形の構築は、~~赤紫色で示される。 ~~白っぽい線は元の~path, ~~黒っぽい領域は ~strokeを示す。 破線は、[ 継ぎ点において[ 区分に接する, かつ区分と同じ曲率 ]の真円を示す。 元の 2 つの真円は交差しないことに注意。 新たな 2 つの真円は、[ 元の真円の半径を それぞれ同じ分量だけ[ 大きい方の真円はより小さく, より小さい方の真円はより大きく ]なるよう, それらがちょうど触れるまで調整する ]ことにより構築される(図の~~緑黄色の真円)。 これらの新たな真円が継ぎ図形を定義する。 ◎ Construction of an arcs line join shape, shown in pink. The white line is the original path and the dark gray region is the stroke. The dashed lines show circles that are tangent to and have the curvature of the segments at the join. Note the circles do not intersect. Two new circles are constructed by adjusting the radii of the original circles by the same magnitude with the larger circle being made smaller and the smaller circle being made larger until the new circles just touch as shown by the olive-green circles. These new circles then define the join shape.
  • 2 つ目の事例は、両~真円【の内域】が重合しない場合。 この事例では、両~真円とも,半径は同じ量だけ増やされる: ◎ The second case is when there is no overlap between the circles. In this case the radii of both circles are increased by the same amount:

    `linejoin-construction-fallback2^dgm
    `arcs^v 線継ぎ図形の構築は、~~赤紫色で示される。 ~~白っぽい線は元の~path, ~~黒っぽい領域は ~strokeを示す。 破線は、[ 継ぎ点において[ 区分に接する, かつ区分と同じ曲率 ]の真円を示す。 元の 2 つの真円は交差しないことに注意。 新たな 2 つの真円は、元の真円の半径を[ それぞれ同じ分量だけ, それらがちょうど触れるまで増やす ]ことにより構築される(図の~~緑黄色の真円)。 これらの新たな真円が継ぎ図形を定義する。 ◎ Construction of an arcs line join shape, shown in pink. The white line is the original path and the dark gray region is the stroke. The dashed lines show circles that are tangent to and have the curvature of the segments at the join. Note they do not intersect. Two new circles are constructed by increasing the radii of the original circles by the same amount until the new circles just touch as shown by the olive-green circles. These new circles then define the join shape.

    この事例においては、線継ぎにおいて~offsetされた~pathの接線が平行になる場合、 2 つの真円が触れるよう調整できない。 その場合、線継ぎは,次のような矩形として構築されるベキである ⇒ 接線に垂直な辺の長さ ~EQ `~stroke幅$, 接線に平行な辺の長さ ~EQ [ `~miter上限$ ~MUL `~stroke幅$ ~DIV 2 ] ◎ If in this latter case, the tangents of the offset paths at the line join are parallel, the circles cannot be adjusted so that they touch. The line join should then be constructed as a rectangle whose width is the stroke width and whose length is the stroke width times one half of the value of the stroke-miterlimit:

    `linejoin-construction-fallback3^dgm
    `arcs^v 線継ぎ図形の構築は、~~赤紫色で示される。 ~~白っぽい線は 継ぎ点の前後の区分を成す元の~path, ~~黒っぽい領域は ~strokeを示す。 破線は[ 継ぎ点において区分に接する, かつ区分と同じ曲率 ]の 2 つの真円を示す。 2 つの真円は、半径が無限大へ増やされても交差しない。 線継ぎは,`~miter上限$により決定される長さ(縦の破線)を伴う矩形になる。 ◎ Construction of an arcs line join shape, shown in pink. The white line is the original path, which has two segments that come to a point, and the dark gray region is the stroke. The dashed lines show circles that are tangent to and have the curvature of the segments at the join. Note they do not intersect. Even if the radii of the circles is increased to infinity, the circles will not intersect. The line join is then a rectangle with the length determined by the miter limit (shown as a vertical dashed line).

注記: ~fallback~algoを実装する仕方には 2 つある。 一つは、半径を変更する分量に対する再帰的な試行錯誤による仕方【何らかの効率的な近似計算法?】。 もう一つは、[ `真円が触れるための条件^em, および[ 2 つの真円の中心は,継ぎ点にて~path区分に~~直交する線~上にあり続けるとする拘束 ]を用立てる,正確な計算によるもの。 後者は、重解を持つ二次~方程式を見つけることにより,半径に要求される変化を得る。 ◎ There are a couple of ways to implement the fallback algorithm. The first way is by recursive trial and error on the magnitude of the radius change. The second is by an exact calculation utilizing the touching circle condition and the constraints that the centers of the circles must remain on lines normal to the path segments at the join. This leads to a quadratic equation where one solution is the required radius change.

13.6. ~vector効果

この節では、 `vector-effect$p の塗ngに関係する部分を説明する。 ~~全般については、他所を見よ。 ◎ This chapter explains vector-effect related to Painting. Please refer to this for the perspective of vector-effect.

`non-scaling-stroke@v
~objが~strokeされる仕方を改変する。 通常の~stroke法は、図形の~pathが成す`~stroke図形$†を現在の`利用元~座標系$内で計算して,結果の外形線を~stroke用の塗り(色または~gradient)で~fillすることを孕む。 `non-scaling-stroke$v ~vector効果では、`利用元~座標系$に代えて,`~host座標~空間$内で~stroke図形を計算するモノトスル。 ~stroke図形は、次の方式で計算される: 先ず図形の~pathを`~host座標~空間$の中へ変形して,~stroke図形を`~host座標~空間$内で計算して,結果の外形線を`利用元~座標系$に変形して戻す。 (~stroke図形は、常に,現在の利用元~座標系における~stroke用の塗りで~fillされる)。 この改変による結果の視覚-効果として、~stroke幅は,要素の座標系変換(斜傾や一様でない拡縮による変形nも含め)や~zoom~levelに依存しなくなる。 ◎ Modifies the way an object is stroked. Normally stroking involves calculating stroke outline of the shape's path in current user coordinate system and filling that outline with the stroke paint (color or gradient). With the non-scaling-stroke vector effect, stroke outline shall be calculated in the "host" coordinate space instead of user coordinate system. More precisely: the viewport coordinate system of the furthest ancestral SVG viewport. The stroke outline is calculated in the following manner: first, the shape's path is transformed into the host coordinate space. Stroke outline is calculated in the host coordinate space. The resulting outline is transformed back to the user coordinate system. (Stroke outline is always filled with stroke paint in the current user coordinate system). The resulting visual effect of this modification is that stroke width is not dependant on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level.
【† 原文には “~stroke外形線” と記されているが、~pathの幾何が成す外形線と紛らわしいので(他の “~stroke図形” も同様)。 】

13.7. ~marker

~SVG-2要件: ~markerを改善する。 ◎ SVG 2 Requirement: Improve markers.

  • 解決: ~markerを~SVG-2用に改善する( `http://www.w3.org/2011/10/27-svg-irc#T18-12-30$refer )。 ◎ Resolution: We will improve markers for SVG 2.
  • 目的: 作者が~SVG~markerに対し共通的に~~面する問題を解く。 ◎ Purpose: To solve the common problems authors have with SVG markers.
  • Owner: Cameron (`3286$ACTION)

~markerは、`図形~要素$要素に沿う特定0の位置に塗られる,~graphicな~objである。 ◎ A marker is a graphical object that is painted at particular positions along any shape element.

[ `marker-start$p / `marker-end$p / `marker-mid$p ]~propを利用すれば, `図形~要素$の[ 最初の頂点/最後の頂点/他のすべての頂点 ]に~markerを配置できる。 これらの~propを利用して配置された~markerは、 `頂点~marker@ とも呼ばれる。 例えば,最初や最後の頂点に~markerを配置すれば、~pathに矢尻を追加できる。 ◎ The marker-start and marker-end properties can be used to place markers at the first and last vertex of a shape, and the marker-mid property can be used to place markers at all other vertices (aside from the first and last). The marker-start and marker-end can be used for example to add arrowheads to paths. Markers placed using these properties are known as vertex markers.

注記: ~SVG-2において可用な~markerは、頂点~markerに限られる。 新種の~markerは、他の仕様が追加することになる。 ◎ In SVG 2, vertex markers are the only kind of markers available. Other specifications will add new types of markers.

~marker用の~graphicは、 `marker$e 要素により定義される。 `marker$e 要素を参照する[ `marker-start$p / `marker-end$p / `marker-mid$p ]~propは、 `~marker~prop@ と~~総称される。 ◎ The graphics for a marker are defined by a ‘marker’ element. The marker-start, marker-end and marker-mid properties, together known as the marker properties, reference ‘marker’ elements.

~markerは~animateできる。 `use$e 要素と同じく,~animateされる効果は、文書の中で現在のすべての~markerの利用に示されることになる。 ◎ Markers can be animated, and as with ‘use’ elements, the animated effects will show on all current uses of the markers within the document.

所与の要素~上の~markerは、~~下層から~~上層へ次の順序で塗られる: ◎ Markers on a given element are painted in the following order, from bottom to top:

13.7.1. `marker^e 要素

◎要素名 `marker@e ◎分類 `容器~要素$, `決して描画されない要素$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `~animation要素$, `記述的~要素$, `塗り~server要素$, `図形~要素$, `構造上の要素$, `a$e, `clipPath$e, `filter$e, `foreignObject$e, `image$e, `marker$e, `mask$e, `script$e, `style$e, `switch$e, `text$e, `view$e ◎属性 `中核~属性$, `大域~event属性$, `文書~要素~event属性$, `呈示~属性$, `viewBox$a, `preserveAspectRatio$a, `refX$a, `refY$a, `markerUnits$a, `markerWidth$a, `markerHeight$a, `orient$a ◎界面 `SVGMarkerElement$I ◎表終

`marker$e 要素は、`図形~要素$上に~markerを描くときに利用される~graphicを定義する。 ◎ The ‘marker’ element defines the graphics that are to be used for drawing markers on a shape.

~attrdef
◎属名 `markerUnits@a ◎属値 `strokeWidth^v | `userSpaceOnUse^v ◎属初 `strokeWidth^v ◎属ア 可 ◎表終 ◎ Name Value Initial value Animatable markerUnits strokeWidth | userSpaceOnUse strokeWidth yes

`markerUnits$a 属性は[ `markerWidth$a 属性, `markerHeight$a 属性, `marker$e の内容 ]用の座標系【の単位】を定義する。 この座標系は、各種 値に応じて: ◎ The ‘markerUnits’ attribute defines the coordinate system for attributes ‘markerWidth’, ‘markerHeight’ and the contents of the ‘marker’. Values have the following meanings:

`strokeWidth^v
1 単位が[ 利用元~単位による,~markerを参照している要素の`~stroke幅$ ]と等しい座標系になる。 ◎ ‘markerWidth’, ‘markerHeight’ and the contents of the ‘marker’ have values in a coordinate system which has a single unit equal to the size in user units of the painted stroke width of the element referencing the marker.
`userSpaceOnUse^v
~markerを参照している要素~用の現在の`利用元~座標系$になる。 ◎ ‘markerWidth’, ‘markerHeight’ and the contents of the ‘marker’ have values in the current user coordinate system in place for the element referencing the marker.
◎属名 `markerWidth@a, `markerHeight@a ◎属値 `length-percentage$t | `number$t ◎属初 `3^v ◎属ア 可 ◎表終
注記: `markerUnits$a の値が `strokeWidth^v の場合、~markerの~sizeは[ ~stroke用の`利用元~座標系$における`~stroke幅$ ]に影響する変形が適用された後の~stroke幅に相対的になる。 これは例えば、[ `vector-effect$p 属性が `non-scaling-stroke$v を値にとる場合の結果は,当の~markerも~non-scalingになる ]ことを意味する。 ◎ When ‘markerUnits’ has the value strokeWidth, the size of the marker is relative to the stroke-width after it has had any transforms applied that affect the width of the stroke in the user coordinate system for the stroke. This means that, for example, the vector-effect attribute with a value of non-scaling-stroke will result in the markers also being non scaling. ◎ Name Value Initial value Animatable markerWidth, markerHeight <length-percentage> | <number> 3 yes
[ `markerWidth$a, `markerHeight$a ]属性は、[ ~markerが[ `viewBox$a, `preserveAspectRatio$a ]属性に則って収められる,~SVG表示域 ]の~sizeを表現する。 両~属性とも,値を `0^v にすると~markerは描画されなくなる。 両~属性とも,負な値は~errorになる(`~error処理$secを見よ)。 ◎ The ‘markerWidth’ and ‘markerHeight’ attributes represent the size of the SVG viewport into which the marker is to be fitted according to the ‘viewBox’ and ‘preserveAspectRatio’ attributes. A value of zero for either attribute results in nothing being rendered for the marker. A negative value for either attribute is an error (see Error processing).
◎属名 `refX@a ◎属値 `length-percentage$t | `number$t | `left^v | `center^v | `right^v ◎属初 `0^v ◎属ア 可 ◎表終 ◎属名 `refY@a ◎属値 `length-percentage$t | `number$t | `top^v | `center^v | `bottom^v ◎属初 `0^v ◎属ア 可 ◎表終 ◎ Name Value Initial value Animatable refX <length-percentage> | <number> | left | center | right 0 yes refY <length-percentage> | <number> | top | center | bottom 0 yes
注記: 各種 幾何-~keywordは、~SVG-2にて新たに~~導入された( `symbol$e における利用に合致する)。 ◎ New in SVG 2: geometric keywords (matches use in ‘symbol’).
[ `marker^e, `symbol^e ]上の[ `refX^a /`refY^a ]に対し,~keyword[ `top^v, `center^v, `bottom^v / `left^v, `center^v, `right^v ]を追加する。 London F2Fにて解決された( `http://www.w3.org/2014/08/26-svg-minutes.html#item07$refer )。 これらの~keywordは、 `background-position$p から着想されている。 ◎ We will add top/center/bottom, left/center/right keywords to refX/refY on marker/symbol. Resolved at London F2F. Values inspired by 'background-position'.
[ `refX$a, `refY$a ]属性は、~markerの基準~点を定義する。 この点が、`図形~要素$上の~markerの位置に正確に配置されることになる。 長さ/実数は、[ `viewBox$a, `preserveAspectRatio$a ]属性を適用した後における,~marker内容の座標系にあるものと解釈されるモノトスル。 百分率~値は、[ `refX$a 用には `viewBox$a 横幅 / `refY$a 用には `viewBox$a 縦幅 ]の百分率として解釈されるモノトスル。 ◎ The ‘refX’ and ‘refY’ attributes define the reference point of the marker, which is to be placed exactly at the marker's position on the shape. Lengths and numbers must be interpreted as being in the coordinate system of the marker contents, after application of the ‘viewBox’ and ‘preserveAspectRatio’ attributes. Percentage values must be interpreted as being a percentage of the ‘viewBox’ width for ‘refX’ or a percentage of the ‘viewBox’ height for ‘refY’.

各種~keyword値は、次の百分率に評価されるモノトスル: ◎ The keyword values must evaluate to the following percentages:

[ `refX^a / `refY^a ]用の各種~keywordから百分率への対応付け ◎ Mapping of refX and refY keywords to percentages.
~keyword 等価な百分率
`left^v 0%
`center^v 50%
`right^v 100%
`top^v 0%
`bottom^v 100%
◎属名 `orient@a ◎属値 `auto^v | `auto-start-reverse^v | `angle$t | `number$t ◎属初 `0^v ◎属ア 可(`加法的でない$) ◎表終 ◎ Name Value Initial value Animatable orient auto | auto-start-reverse | <angle> | <number> 0 yes (non-additive)

`orient$a 属性は、~markerが`図形~要素$上で~~所定の位置に配置されるときに,どう回転されるかを指示する。 各種 値の意味は: ◎ The ‘orient’ attribute indicates how the marker is rotated when it is placed at its position on the shape. Values have the following meanings:

`auto^v
~markerは、その正な~x軸が[ ~path上に~markerが配置される位置において,~pathが指している方向 ]を向くように方位される(~markerの描画-法を見よ)。 ◎ The marker is oriented such that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed (See Rendering Markers).
`auto-start-reverse^v
`marker-start$p により配置される~marker用には、 `auto^v が指定されたときとは~~正反対を向くように方位される。 それ以外の~marker用には、 `auto^v が指定されたときと同じになる。 ◎ If placed by marker-start, the marker is oriented 180° different from the orientation that would be used if 'auto' where specified. For all other markers, 'auto-start-reverse' means the same as 'auto'.
注記: これにより、同じ矢尻~markerを,~pathの両端に利用する — すなわち、両端とも,そこから外方を指す — よう定義できるようになる。 ◎ This allows a single arrowhead marker to be defined that can be used for both the start and end of a path, i.e. which points outwards from both ends.
`angle$t
`number$t
~markerは、[ その正な~x軸が,当の`図形~要素$の正な~x軸から指定された角度だけ回転される ]ように方位される。 `number$t 値は、角度を `deg^u 単位で指定する。 ◎ The marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis. A <number> value specifies an angle in degrees.
注記: 例えば,値 `45^v が与えられた場合、~markerの正な~x軸は,`図形~要素$の座標系において,斜め右下を指すことになる。 ◎ For example, if a value of '45' is given, then the marker's positive x-axis would be pointing down and right in the shape's coordinate system.

13.7.2. 頂点~marker: `marker-start^p, `marker-mid^p, `marker-end^p ~prop

◎名 `marker-start@p, `marker-mid@p, `marker-end@p ◎値 `none^v | `marker-ref$t ◎初 `none^v ◎適 `図形~要素$ ◎継 される ◎百 受容しない ◎算 指定された~keyword/ 絶対~化された `url^t ◎ as specified, but with <url> values (that are part of a <marker-ref>) made absolute ◎ア 離散的 ◎表終

ここで ◎ where:

`marker-ref@t = `url$t

[ `marker-start$p / `marker-end$p / `marker-mid$p ]~propは、所与の`図形~要素$の[ 最初の頂点/最後の頂点/他のすべての頂点 ]に描かれることになる~markerを指定するために利用される。 これらの~propにアリな値は: ◎ The marker-start and marker-end properties are used to specify the marker that will be drawn at the first and last vertices of the given shape, respectively. marker-mid is used to specify the marker that will be drawn at all other vertices (i.e., every vertex except the first and last). Possible values for marker-start, marker-mid and marker-end are:

`none^v
~~対象の頂点には、~marker~symbolは描かないことを指示する。 ◎ Indicates that no marker symbol will be drawn at the given vertex or vertices.
`marker-ref$t
`marker-ref$t 値が参照する `marker$e 要素を,~~対象の頂点に描くことを指示する。 参照が妥当でない場合、~markerは~~対象の頂点には描かれなくなる。 ◎ Indicates that the ‘marker’ element referenced by the <marker-ref> value will be drawn at the given vertex or vertices. If the reference is not valid, then no marker will be drawn at the given vertex or vertices.

どの`図形~要素$に対しても、~marker位置を計算するときには,図形に`等価な~path$を利用するモノトスル。 ◎ For all shapes, the path that must be used when calculating marker positions is the equivalent path.

`polyline$e, `path$e 以外の`図形~要素$においては、最後の頂点と最初の頂点は一致する — この事例では、 `marker-start$p, `marker-end$p の両者とも `none^v でない値をとる場合、その一致する頂点~上に両~markerが描画されることになる。 ◎ For all shape elements, except ‘polyline’ and ‘path’, the last vertex is the same as the first vertex. In this case, if the value of marker-start and marker-end are both not none, then two markers will be rendered on that final vertex.\

`path$e 要素に対しては、その各 `閉な下位path$において最後の頂点と最初の頂点は一致する。 [ `marker-start$p / `marker-end$p / `marker-mid$p ]は,`~path~data$【すなわち~path全体】の[ 最初の頂点/最後の頂点/他のすべての頂点 ]のみに描画するモノトスル。 【いずれにせよ、各 閉な下位pathの一致する頂点には,2 つの~markerが描画される(下の例)。】 ◎ For ‘path’ elements, for each closed subpath, the last vertex is the same as the first vertex. marker-start must only be rendered on the first vertex of the path data. marker-end must only be rendered on the final vertex of the path data. marker-mid must be rendered on every vertex other than the first vertex of the path data and the last vertex of the path data.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30">
  <defs>
    <marker
      id="m1"
      viewBox="0 0 10 10"
      refX="5" refY="5"
      markerWidth="8" markerHeight="8"
    >
      <circle cx="5" cy="5" r="5" fill="green"/>
    </marker>
    <marker
      id="m2"
      viewBox="0 0 10 10"
      refX="5" refY="5"
       markerWidth="6.5" markerHeight="6.5"
    >
      <circle cx="5" cy="5" r="5" fill="skyblue" opacity="0.9"/>
    </marker>
    <marker
      id="m3"
      viewBox="0 0 10 10"
      refX="5" refY="5"
      markerWidth="5" markerHeight="5"
    >
      <circle cx="5" cy="5" r="5" fill="maroon" opacity="0.85"/>
    </marker>
  </defs>
  
  <path
    d="
      M10,10 h10 v10 z
      m20, 0 h10 v10 z
      m20, 0 h10 v10 z"
    fill="none" stroke="black"
    marker-start="url(#m1)"
    marker-mid="url(#m2)"
    marker-end="url(#m3)"
  />
</svg>
`marker-doubled^dgm
`~path~data$が`閉な下位path$を包含している場合、各`閉な下位path$の[ 最初, 最後 ]の一致する頂点に 2 個の~markerが描かれる ⇒# 図左の閉な下位pathには、 `marker-start$p の上に `marker-mid$p が描かれる。 図中央の閉な下位pathには、 `marker-mid$p の上にもう 1 個の `marker-mid$p が描かれる。 図右の閉な下位pathには、 `marker-mid$p の上に `marker-end$p が描かれる。 ◎ For path data containing closed subpaths, two markers are drawn at the first/last vertex of each closed subpath. For the leftmost closed subpath, a marker-mid is drawn over the marker-start. For the middle closed subpath, two marker-mid are drawn on top of one another. For the rightmost closed subpath, marker-end is drawn over marker-mid.

注記: [ `marker-start$p / `marker-end$p ]は、各~下位pathではなく,~path全体の[ 最初, 最後 ]の頂点を指すことに注意。 ◎ Note that marker-start and marker-end refer to the first and last vertex of the entire path, not each subpath.

`頂点~marker$に三角な~marker~symbolを利用して, 2 本の~pathの終端に矢尻を形成する例を次に示す。 ◎ The following example shows a triangular marker symbol used as a vertex marker to form an arrowhead at the end of two paths.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="275" height="200"
  viewBox="0 0 275 200"
>
  <defs>
    <marker
      id="Triangle"
      viewBox="0 0 10 10"
      refX="1" refY="5" 
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto"
    >
      <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"/>
    </marker>
  </defs>

  <g fill="none" stroke-width="10" marker-end="url(#Triangle)">
    <path stroke="crimson" d="M 100,75 C 125,50 150,50 175,75"/>
    <path stroke="olivedrab" d="M 175,125 C 150,150 125,150 100,125"/>
  </g>
</svg>
`marker-rendering^dgm
三角形は、~pathの終端に配置され,~~正しい方向を指すよう自動的に方位される。 `context-stroke^v の利用は、各~三角形の~fillが各 `path$e の~strokeに合致することを確保する。 ◎ The triangle is placed at the end of the path and oriented automatically so that it points in the right direction. The use of context-stroke ensures the fill of the triangle matches the stroke of each ‘path’.

13.7.3. ~marker略式: `marker^p ~prop

◎名 `marker@p ◎値 `none^v | `marker-ref$t ◎初 略式~prop用には定義されない【この句には、何か特別な意味はあるのか?】 ◎ not defined for shorthand properties ◎適 `図形~要素$ ◎継 される ◎百 受容しない ◎算 個々の~propを見よ ◎ア 離散的 ◎表終

`marker$p ~propは、[ `marker-start$p, `marker-mid$p, `marker-end$p ]~prop用の値を設定する。 `marker$p の値は、これらの下位prop用に直に利用される。 ◎ The marker property sets values for the marker-start, marker-mid and marker-end properties. The value of the marker is used directly for all three of the corresponding longhand properties.

13.7.4. ~markerの描画-法

`orient$a が `auto^v に指定されたことに因り,~markerを自動的に方位するときには、次の規則が利用される: ◎ When orienting a marker automatically, due to specifying ‘orient’ as 'auto', the following rules are used:

  • 当の頂点は,`開な下位path$の[ 始端/終端 ]にある場合、~markerは`~pathの方向$に方位される。 ◎ If the vertex is the start or end of an open subpath, then the marker is oriented in the path direction.
  • 他の場合、~markerは[ 直前の区分の`終端における方向$, 直後の区分の`始端における方向$ ]の~~真中の方向に方位される。 【 2 つの方向が~~正反対の場合のふるまいが定義されていない(参照)】 ◎ Otherwise, the marker is oriented in a direction half way between the direction at the end of the preceding segment and the direction at the start of the following segment.

描かれる各~markerに対しては、~markerが正しく位置され, ~sizeされるよう,次に従って一時的に新たな利用元~座標系 %座標系 が確立される: ◎ For each marker that is drawn, a temporary new user coordinate system is established so that the marker will be positioned and sized correctly, as follows:

  • %座標系 の各~軸は、 `marker$e 要素~上の `orient$a 属性に則って整列される。 ◎ The axes of the temporary new user coordinate system are aligned according to the ‘orient’ attribute on the ‘marker’ element.
  • `markerUnits$a 属性の値が `strokeWidth^v の場合、確立される %座標系 は,現在の`利用元~座標系$を `stroke-width$p ~propの現在の値で拡縮した結果になる。 属性の値が `userSpaceOnUse^v の場合には、この拡縮-変形nは適用されない。 ◎ A temporary new coordinate system is established by attribute ‘markerUnits’. If ‘markerUnits’ equals 'strokeWidth', then the temporary new user coordinate system is the result of scaling the current user coordinate system by the current value of property stroke-width. If ‘markerUnits’ equals 'userSpaceOnUse', then no extra scale transformation is applied.
  • `marker$e 要素が `viewBox$a 属性を含む場合、追加的な 一連の座標系変換が生じることもある。 そのような事例では、これらの座標系変換は、[ `viewBox$a, `preserveAspectRatio$a ]属性に因り必要とされる結果を生産するように設定しておかれる。 ◎ An additional set of transformations might occur if the ‘marker’ element includes a ‘viewBox’ attribute, in which case additional transformations are set up to produce the necessary result due to attributes ‘viewBox’ and ‘preserveAspectRatio’.
  • `marker$e 要素~上の `overflow$p ~propが[ 当の~markerは、~SVG表示域に切抜かれる必要がある ]ことを指示する場合、~SVG表示域の限界域に暗黙的な切抜き~pathが確立される。 ◎ If the overflow property on the ‘marker’ element indicates that the marker needs to be clipped to its SVG viewport, then an implicit clipping path is established at the bounds of the SVG viewport.

注記: `~UA~stylesheet$は、 `marker$e 要素~用の `overflow$p ~propを `hidden^v に設定することに注意。 それは、既定で,~markerの~SVG表示域を成す限界域に矩形な切抜き~pathを作成させる。 ◎ Note that the user agent style sheet sets the overflow property for ‘marker’ elements to hidden, which causes a rectangular clipping path to be created at the bounds of marker's SVG viewport by default.

~markerの内容が `marker$e を参照している要素から~propを継承することはない。 しかしながら,~marker内容を成す要素~上で[ `fill$p / `stroke$p ]用に `context-stroke^v 値を利用することにより、単独の~markerを,当の~markerを参照している要素の~styleに合致するよう設計できる。 ◎ Properties do not inherit from the element referencing the ‘marker’ into the contents of the marker. However, by using the context-stroke value for the fill or stroke on elements in its definition, a single marker can be designed to match the style of the element referencing the marker.

~markerとは対話できない。 例えば,描画された~marker上で~mouseが~clickされたり移動されても、 `click^et や `mouseover^et などの~eventは, `marker$e や その子には配送されない。 ◎ Markers cannot be interacted with. Events such as click or mouseover, for example, are not dispatched to a ‘marker’ or its children when the mouse is clicked or moved over a rendered marker.

~markerは、直に描画されることは決してない。 その~~用法は、`~marker~prop$により参照する他にない。 `marker$e 要素~用の `display$p 値は、`~UA~stylesheet$において,常に `none^v に設定されるモノトスル — この宣言の重要度は,他のどの[ ~CSS規則/呈示~属性 ]よりも高いモノトスル。 `marker$e 要素は、要素~自身やその先祖の `display$p ~propの値を問わず,参照~用に可用になるとする。 ◎ Markers are not rendered directly and must be referenced by one of the marker properties to be rendered. The display value for the ‘marker’ element must always be set to none by the user agent style sheet, and this declaration must have importance over any other CSS rule or presentation attribute. ‘marker’ elements are available for referencing even when the display property on the ‘marker’ element or any of its ancestors is set to none.

~markerの描画~効果は、[ 参照先の `marker$e 要素の内容が — ~markerの各~instance用に — 別々の 公開されない~DOM~treeの中へ深く~cloneされた ]かのようになる。 ~cloneされた~DOM~treeは公開されないので、~cloneされた~marker~instanceが~SVG~DOMに現れることはない。 ◎ The rendering effect of a marker is as if the contents of the referenced ‘marker’ element were deeply cloned into a separate non-exposed DOM tree for each instance of the marker. Because the cloned DOM tree is non-exposed, the SVG DOM does not show the cloned instance of the marker.

この概念的な~cloneは、 ~CSS~cascade `CSS2$r による結果の[ 参照先の要素, その内容 ]に継承された~prop値も複製する。 【~cascadeによる結果は指定d値に基づくので,(算出d値ではなく)指定d値を複製することになる。】 ~CSS選択子は、元の(すなわち参照先の)要素には適用できるが,概念的に~cloneされた~DOM~treeには適用できない — 前者は正式な文書~構造の一部を成すが、後者はそうでないので。 ◎ The conceptual deep cloning of the referenced ‘marker’ element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS2], chapter 6) and property inheritance on the referenced element and its contents. CSS selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.

先ず,~marker例を示し、その後に~markerを利用しない等価な例を示す: ◎ For illustrative purposes, we'll repeat the marker example shown earlier:

<?xml version="1.0" standalone="no"?>
<svg
  width="4in" height="2in"
  viewBox="0 0 4000 2000"
  xmlns="http://www.w3.org/2000/svg"
>
  <defs>
    <marker
      id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5"
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto"
    >
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <rect
    x="10" y="10"
    width="3980" height="1980"
    fill="none" stroke="blue" stroke-width="10"
  />
  <desc>
~pathの終端に矢尻を配置する
◎
Placing an arrowhead at the end of a path.
</desc>
  <path
    d="M 1000 750 L 2000 750 L 2500 1250"
    fill="none" stroke="black" stroke-width="100"
    marker-end="url(#Triangle)"
  />
</svg>

上の例による描画~効果は、次と視覚的に一致する: ◎ The rendering effect of the above file will be visually identical to the following:

<?xml version="1.0" standalone="no"?>
<svg
  width="4in" height="2in"
  viewBox="0 0 4000 2000"
  xmlns="http://www.w3.org/2000/svg"
>
  <desc>
~markerを利用せずに,上の~marker例と同じ効果を生産する
◎
File which produces the same effect as the marker example file, but without using markers.
</desc>
  <rect
    x="10" y="10" width="3980" height="1980"
    fill="none" stroke="blue" stroke-width="10"
  />

  <!-- 
~pathは、上の例と同じに描くが,~marker~propは伴わない。
◎
The path draws as before, but without the marker properties
 -->
  <path
    d="M 1000 750 L 2000 750 L 2500 1250"
    fill="none" stroke="black" stroke-width="100"
  />

  <!-- 
以下の~logicは、~pathの最後の頂点に描かれる~markerを模倣する。
◎
The following logic simulates drawing a marker at final vertex of the path.
 -->

  <!-- 
初めに,利用元~座標系の原点を移動して、原点を~pathの終点に整列する。
◎
First off, move the origin of the user coordinate system so that the origin is now aligned with the end point of the path.
 -->
  <g transform="translate(2500,1250)" >

    <!-- 
座標系を 45 度~回転する
— ~markerの `orient$a は `auto^v に指定されていて,~pathを成す最後の区分は 45 度の方向へ伸びている。
◎
Rotate the coordinate system 45 degrees because the marker specified orient="auto" and the final segment of the path is going in the direction of 45 degrees.
 -->
    <g transform="rotate(45)" >

      <!-- 
`markerUnits$a 属性(この事例では、値 `strokeWidth^v )に指示される座標系に合致するよう,座標系を拡縮する。
したがって,座標系を `stroke-width^p ~propの現在の値 `100^v 倍に拡縮する。
◎
Scale the coordinate system to match the coordinate system indicated by the 'markerUnits' attributes, which in this case has a value of 'strokeWidth'. Therefore, scale the coordinate system by the current value of the 'stroke-width' property, which is 100.
 -->
      <g transform="scale(100)" >

        <!-- 
~markerの中の ( `refX$a, `refY$a ) を頂点に整列するため、
( ~MINUS `refX^a ~MUL %scaleX, ~MINUS `refY^a ~MUL %scaleY )
だけ座標系を並進する
— ここで[
%scaleX / %scaleY
]は、 `viewBox$a から~marker単位~座標系への[
~x軸/~y軸
]拡縮率。
この事例では、 `preserveAspectRatio$a 用に既定の値( `xMidYMid meet^v )を利用する
— それは[
`viewBox^a は全体が~SVG表示域の中に収まる( `meet^v ), かつ中央に寄せる( `xMidYMid^v )
]ような,一様な拡縮-係数(すなわち %scaleX = %scaleY )を見出すことを意味し、この事例では
( `markerHeight$a ~DIV `viewBox^a の縦幅 ) ~EQ ( 3 ~DIV 10 ) ~EQ 0.3
になる。
したがって,
( ~MINUS `refX^a ~MUL 0.3, ~MINUS `refY^a ~MUL 0.3 ) ~EQ ( 0, ~MINUS 1.5 )
だけ並進される
◎
Translate the coordinate system by (-refX*viewBoxToMarkerUnitsScaleX, -refY*viewBoxToMarkerUnitsScaleY) in order that (refX,refY) within the marker will align with the vertex. In this case, we use the default value for preserveAspectRatio ('xMidYMid meet'), which means find a uniform scale factor (i.e., viewBoxToMarkerUnitsScaleX=viewBoxToMarkerUnitsScaleY) such that the viewBox fits entirely within the SVG viewport ('meet') and is center-aligned ('xMidYMid'). In this case, the uniform scale factor is markerHeight/viewBoxHeight=3/10=.3. Therefore, translate by (-refX*.3,-refY*.3)=(0*.3,-5*.3)=(0,-1.5).
 -->
        <g transform="translate(0,-1.5)" >

          <!-- 
~marker用の `overflow$p ~propの値は,~UA~stylesheetにより `hidden^v にされるので、暗黙的な切抜き~pathがある。
これを達成するため、~SVG表示域を成す限界域に,切抜き~pathを作成する。
この事例では、[
一様な拡縮-係数,
異なる比率[
`markerWidth$a ~DIV `viewBox^a の横幅, `markerHeight$a ~DIV `viewBox^a の縦幅
],
`xMidYMid^v 整列
]に因り,~SVG表示域は 0.5 単位だけ `viewBox^a の左, 右へ拡幅されることに注意。
◎
There is an implicit clipping path because the user agent style sheet says that the 'overflow' property for markers has the value 'hidden'. To achieve this, create a clipping path at the bounds of the SVG viewport. Note that in this case the SVG viewport extends 0.5 units to the left and right of the viewBox due to a uniform scale factor, different ratios for markerWidth/viewBoxWidth and markerHeight/viewBoxHeight, and 'xMidYMid' alignment
 -->
          <clipPath id="cp1" >
            <rect x="-0.5" y="0" width="4" height="3" />
          </clipPath>
          <g clip-path="url(#cp1)" >

            <!-- 
座標系を `viewBox^a 単位に設定するため、上述の一様な拡縮-係数 0.3 で拡縮する。
◎
Scale the coordinate system by the uniform scale factor markerHeight/viewBoxHeight=3/10=.3 to set the coordinate system to viewBox units.
 -->
            <g transform="scale(.3)" >

              <!-- 
この `g^e 要素は、[
元の `marker^e 要素~上の各種~propの~cascade法と継承
]の結果による,すべての~prop値を~~保有する。
この例では, `marker^e 要素にも その どの先祖にも[
`fill^p / `stroke^p
]は指定されていないので、初期~値[
`black^v / `none^v
]が利用される。
◎
This 'g' element carries all property values that result from cascading and inheritance of properties on the original 'marker' element. In this example, neither fill nor stroke was specified on the 'marker' element or any ancestors of the 'marker', so the initial values of "black" and "none" are used, respectively.
 -->
             <g fill="black" stroke="none" >
                <!-- 
`marker^e 要素の内容と同じ内容。
◎
Expand out the contents of the 'marker' element.
 -->
                <path d="M 0 0 L 10 5 L 0 10 z" />
              </g>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>
`painting/marker-simulated.svg^viewAs

13.8. 塗り演算~順序の制御-法: `paint-order^p ~prop

~SVG-2要件: 図形~上の[ ~fill, ~stroke, ~marker ]による塗ng順序の制御を~supportする。 ◎ SVG 2 Requirement: Support control of the order of filling, stroke and painting markers on shapes.

  • 解決: ~SVG-2は `paint-order^p ~prop提案を採用する( `http://www.w3.org/2012/05/07-svg-minutes#item03$refer )。 この~prop名は、場合によっては他の名前になるとされていたが,今や解決された — 15 Nov 2013 minutes( `http://www.w3.org/2013/11/15-svg-minutes.html#item12$refer )を見よ。 ◎ Resolution: SVG 2 will adopt the ‘paint-order’ property proposal, though possibly with a different name. The property name is now resolved, see 15 Nov 2013 minutes.
  • 目的: 共通的に欲される,要素を重複する必要なく ~fillの下に~strokeを塗ることに取組む。 ◎ Purpose: To address the common desire to paint strokes below fills without having to duplicate an element.
  • Owner: Cameron (`3285$ACTION)
◎名 `paint-order@p ◎値 `normal^v | [ `fill^v || `stroke^v || `markers^v ] ◎初 `normal^v ◎適 `図形~要素$, `~text内容~要素$ ◎継 される ◎百 受容しない ◎算 指定された~keyword(たち) ◎ア 離散的 ◎表終

注記: ~SVG-2にて新たに~~導入された: 主として,[ `text$e 要素を重複する必要なく,~textの~strokeを~fillの下に塗る ]ことを許容するために追加された。 ◎ New in SVG 2. Added primarily to allow painting the stroke of text below its fill without needing to duplicate the ‘text’ element.

`paint-order$p ~propは、[ `図形~要素$/~text ]の描画に利用され得る 3 つの塗り演算 — ~fill, ~stroke, ~marker — の順序を制御する(順に,~keyword `fill^v, `stroke^v, `markers^v に対応する)。 ◎ The paint-order property controls the order that the three paint operations that shapes and text are rendered with: their fill, their stroke and any markers they might have.

この~propの値が `normal^v のときは、要素は,標準な塗ng演算の順序 — ~fill, ~stroke, ~marker の順 — で塗られる。 ◎ When the value of this property is normal, the element is painted with the standard order of painting operations: the fill is painted first, then its stroke and finally its markers.

他の~keywordが利用された場合の塗ng演算の順序は、先ず[ 与えられた順による,各~keywordに対応する塗ng演算 ], 次に[ `normal^v のときと同じ順序による,省略された~keywordに対応する塗ng演算 ]になる。 ◎ When any of the other keywords are used, the order of the paint operations for painting the element is as given, from left to right. If any of the three keywords are omitted, they are painted last, in the order they would be painted with paint-order: normal.

注記: 例えば, `paint-order^p が `stroke^v にされたときの描画の挙動は、 `stroke fill markers^v にされたとき同じになる。 ◎ This means that, for example, paint-order: stroke has the same rendering behavior as paint-order: stroke fill markers.

`paint-order$p ~propを利用して,より審美的に快い方式で~textを~strokeするよう描画できる様子を次の例に示す。 ◎ The following example shows how the paint-order property can be used to render stroked text in a more aesthetically pleasing manner.

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="150" viewBox="0 0 600 150">

  <style>
    text {
      font: 80px bold sans-serif; stroke-linejoin: round;
      text-anchor: middle; fill: peachpuff; stroke: crimson;
    }
  </style>

  <text x="150" y="100" style="stroke-width: 6px;">pizazz</text>
  <text x="450" y="100" style="stroke-width: 12px; paint-order: stroke;">pizazz</text>
</svg>
`paintorder^dgm
~fillの下に~strokeが塗られる~text。 ◎ Text painted with its stroke below the fill.

13.9. 補間~用の色~空間: `color-interpolation^p ~prop

◎名 `color-interpolation@p ◎値 `auto^v | `sRGB^v | `linearRGB^v ◎初 `sRGB^v ◎適 `容器~要素$, `~graphics要素$, `~gradient要素$, `use$e, `animate$e ◎ container elements, graphics elements, gradient elements, ‘use’ and ‘animate’ ◎継 される ◎百 受容しない ◎算 指定された~keyword ◎ア 離散的 ◎表終

~SVG~UAは、~SVG内容を処理するに伴い,様々な所で色の補間, 組成を遂行する。 `color-interpolation$p ~propは、次に挙げる~graphic演算~用にどの色~空間を利用するかを制御する: ◎ The SVG user agent performs color interpolations and compositing at various points as it processes SVG content. The color-interpolation property controls which color space is used for the following graphics operations:

  • `~gradient$ の色停どうしを補間するとき ◎ interpolating between gradient stops,
  • `animate$e で色の~animationにおいて色どうしを補間するとき ◎ interpolating color when performing color animations with ‘animate’,
  • 現在の背景の中へ`~graphics要素$を 組成して混色する とき。 ◎ and compositing and blending of graphics elements into the current background.

注記: ~filter効果 用に利用する色~空間は、 `color-interpolation-filters$p ~propが制御する。 `filter-effects-1$r ◎ For filter effects, the color-interpolation-filters property controls which color space is used. [filter-effects-1]

`color-interpolation$p ~propは、色~演算を 2 種類の色~空間 — ~sRGB色~空間, 線型~化された(光の強度( `light energy^en )に線型な)~RGB色~空間 — どちらで行うかを選ぶ。 適切な色~空間が選ばれてから,各 成分ごとに線型~補間が利用される。 各種~値の意味は: ◎ The color-interpolation property chooses between color operations occurring in the sRGB color space or in a (light energy linear) linearized RGB color space. Having chosen the appropriate color space, component-wise linear interpolation is used. Values for color-interpolation have the following meanings:

`auto^v
~UAは、色~補間~用に `sRGB^v, `linearRGB^v どちらの空間も選べることを指示する。 ◎ Indicates that the user agent can choose either the sRGB or linearRGB spaces for color interpolation.\
この~optionは、[ 作者は、特定0の色~空間~内で色を補間するよう要求していない ]ことを指示する。 ◎ This option indicates that the author doesn't require that color interpolation occur in a particular color space.
`sRGB^v
~sRGB色~空間~内で色を補間することを指示する。 ◎ Indicates that color interpolation occurs in the sRGB color space.
`linearRGB^v
下に述べる線型~化された~RGB色~空間~内で色を補間することを指示する。 ◎ Indicates that color interpolation occurs in the linearized RGB color space as described below.

~sRGB色~空間(すなわち、線型でない,~gamma曲線 2.2 )と線型~化された~RGB色~空間(すなわち,~gamma曲線を伴わない~sRGB三刺激~値で表出される色~値)との間の換算~公式は、 ~sRGB仕様 `SRGB$r にて見出せる。 説明用に、~sRGBから線型~化された~RGBへの換算~公式を各~色~成分ごとに次に示す — %C を ~sRGB色~成分, どの成分も範囲 0 〜 1 の値をとるとするとき、線型~色~成分は次で与えられる: ◎ The conversion formulas between the sRGB color space (i.e., nonlinear with 2.2 gamma curve) and the linearized RGB color space (i.e., color values expressed as sRGB tristimulus values without a gamma curve) can be found in the sRGB specification [SRGB]. For illustrative purposes, the following formula shows the conversion from sRGB to linearized RGB, where Csrgb is one of the three sRGB color components, Clinear is the corresponding linearized RGB color component, and all color values are between 0 and 1:

%C ~LTE 0.04045 ならば ( %C ~DIV 12.92 ) / ~ELSE_ `pow^op( ( %C ~PLUS 0.055 ) ~DIV 1.055, 2.4 ) ◎ if C_srgb <= 0.04045 C_linear = C_srgb / 12.92 else if c_srgb > 0.04045 C_linear = ((C_srgb + 0.055) / 1.055) ^ 2.4

~UAが~supportするならば、範囲~外の色~値も上の公式を利用して換算される。 ◎ Out-of-range color values, if supported by the user agent, also are converted using the above formulas.

子~要素が背景の中へ混色されるときには、親ではなく,子の `color-interpolation$p ~propの値が混色-法の型を決定する。 `href^a 属性を用立てて別の~gradientを参照する`~gradient$は、[[ `fill$p / `stroke$p ]~propにより直に参照されている~gradient要素 ]からの `color-interpolation$p ~prop値を利用する。 色を~animateするときの補間は、~animateされている要素~上の `color-interpolation$p ~propの値に則って遂行される。 ◎ When a child element is blended into a background, the value of the color-interpolation property on the child determines the type of blending, not the value of the color-interpolation on the parent. For gradients which make use of the ‘href’ attribute to reference another gradient, the gradient uses the color-interpolation property value from the gradient element which is directly referenced by the fill or stroke property. When animating colors, color interpolation is performed according to the value of the color-interpolation property on the element being animated.

13.10. 描画~hint

13.10.1. `shape-rendering^p ~prop

◎名 `shape-rendering@p ◎値 `auto^v | `optimizeSpeed^v | `crispEdges^v | `geometricPrecision^v ◎初 `auto^v ◎適 `図形~要素$ ◎継 される ◎百 受容しない ◎算 指定された~keyword ◎ア 離散的 ◎表終

`shape-rendering$p ~propは、~vector~graphics要素 — `path$e 要素や真円や矩形~などの`基本~図形$など — を描画する際に,[ 速さ, クッキリした辺, 幾何-精度 ]の兼ね合いをどう図るかについての~hintを実装に供する。 各種 値の意味は: ◎ The shape-rendering property provides a hint to the implementation about what tradeoffs to make as it renders vector graphics elements such as ‘path’ elements and basic shapes such as circles and rectangles. Values have the following meanings:

`auto^v
[ ~UAは、[ 速さ, クッキリした辺, 幾何-精度 ]の兼ね合いを適切に図りつつ,速さやクッキリした辺より幾何-精度を重視するモノトスル ]ことを指示する。 ◎ Indicates that the user agent shall make appropriate tradeoffs to balance speed, crisp edges and geometric precision, but with geometric precision given more importance than speed and crisp edges.
`optimizeSpeed^v
[ ~UAは[ 幾何-精度, クッキリした辺より,描画~速さを際立てるモノトスル ]ことを指示する。 ◎ Indicates that the user agent shall emphasize rendering speed over geometric precision and crisp edges.\
この~optionは、~UAによる図形の~anti-aliasingをオフにさせることもある。 ◎ This option will sometimes cause the user agent to turn off shape anti-aliasing.
`crispEdges^v
[ ~UAは、描画~速さ, 幾何-精度より,~artworkを成す辺の明瞭な~contrastを際立たせようと試みるモノトスル ]ことを指示する。 ◎ Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision.\
~UAは、(~~輪郭が)クッキリした辺( `crisp edge^en )を達成するために,[ すべての直線や曲線, あるいは場合によっては 縦/横に近い直線だけ ]に対し,~anti-aliasingをオフにするかもしれない。 また,~UAは、辺が機器~画素に整列するよう,線~位置や線~幅を調整するかもしれない。 ◎ To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.
`geometricPrecision^v
[ ~UAは、速さ, クッキリした辺より幾何-精度を際立てるモノトスル ]ことを指示する。 ◎ Indicates that the user agent shall emphasize geometric precision over speed and crisp edges.

13.10.2. `text-rendering^p ~prop

◎名 `text-rendering@p ◎値 `auto^v | `optimizeSpeed^v | `optimizeLegibility^v | `geometricPrecision^v ◎初 `auto^v ◎適 `text$e 要素 ◎継 される ◎百 受容しない ◎算 指定された~keyword ◎ア 離散的 ◎表終

`text-rendering$p ~propは、[ ~textを描画するときに[ 速さ, 判読能, 幾何-精度 ]の兼ね合いをどう図るか ]についての~hintを実装に供する。 各種 値の意味は: ◎ The text-rendering property provides a hint to the implementation about what tradeoffs to make as it renders text. Values have the following meanings:

`auto^v
[ ~UAは、[ 速さ, 判読能, 幾何-精度 ]の兼ね合いを適切に図りつつ,速さや幾何-精度より判読能を重視するモノトスル ]ことを指示する。 ◎ Indicates that the user agent shall make appropriate tradeoffs to balance speed, legibility and geometric precision, but with legibility given more importance than speed and geometric precision.
`optimizeSpeed^v
[ ~UAは、判読能, 幾何-精度より描画~速さを際立てるモノトスル ]ことを指示する。 ◎ Indicates that the user agent shall emphasize rendering speed over legibility and geometric precision.\
この~optionは、~UAによる~textの~anti-aliasingをオフにさせることもある。 ◎ This option will sometimes cause the user agent to turn off text anti-aliasing.
`optimizeLegibility^v
[ ~UAは、 描画~速さ, 幾何-精度より判読能を際立てるモノトスル ]ことを指示する。 ◎ Indicates that the user agent shall emphasize legibility over rendering speed and geometric precision.\
~UAは、最も判読可能な~textを生産するために,[ ~anti-aliasing技法, 組込みの~font~hint法, この両者 ]いずれかの適用を選ぶことになることが多い。 ◎ The user agent will often choose whether to apply anti-aliasing techniques, built-in font hinting or both to produce the most legible text.
`geometricPrecision^v
[ ~UAは、判読能, 描画~速さより幾何-精度を際立てるモノトスル ]ことを指示する。 ◎ Indicates that the user agent shall emphasize geometric precision over legibility and rendering speed.\
この~optionは、通例的に — ~glyph外形線が~path~dataの描画と同程度の幾何-精度で描かれるよう — ~UAに~hint法の利用-を休止させることになる。 ◎ This option will usually cause the user agent to suspend the use of hinting so that glyph outlines are drawn with comparable geometric precision to the rendering of path data.

13.10.3. `image-rendering^p ~prop

◎名 `image-rendering@p ◎値 `auto^v | `optimizeQuality^v | `optimizeSpeed^v ◎初 `auto^v ◎適 画像 ◎継 される ◎百 受容しない ◎算 指定された~keyword ◎ア 離散的 ◎表終

注記: `CSS Image Values and Replacement Conent Module Level 4^cite は、将来に この~propを定義し直すであろう†。 特に拡大するときに, `smoothing^en, `pixelated^en どちらの見かけを保つか選べるようにするベキである。 ◎ The CSS Image Values and Replacement Conent Module Level 4 may in the future redefine this property. In particular it should allow the choice between smoothing and keeping a pixelated look when upscaling.

【† すでに ~level 3 に定義されている。 そこでは、上に挙げられた値 `optimizeQuality^v, `optimizeSpeed^v は非推奨にされ,順に `smooth^v, `pixelated^v の別名とされている。 】

`image-rendering$p ~propは、画像~処理を遂行する際に[ 速さ, 品質の兼ね合いをどう図るか ]についての~hintを実装に供する。 各種 値の意味は: ◎ The image-rendering property provides a hint to the implementation about how to make speed vs. quality tradeoffs as it performs image processing. Values have the following meanings:

`auto^v
[ ~UAは、[ 速さ, 品質 ]の兼ね合いを適切に図りつつ,速さより品質を重視するモノトスル ]ことを指示する。 ◎ Indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed.\
~UAは、標本化し直す~algoとして,最近傍~法( `nearest neighbor^en 法)以上の品質を得るものを使役するモノトスルが、双線型~法( `bilinear^en 法)が強く選好される。 `適合~高品質~SVG~viewer$は、標本化し直す~algoとして,双線型~法~以上の品質を得るものを使役するモノトスル。 ◎ The user agent shall employ a resampling algorithm at least as good as nearest neighbor resampling, but bilinear resampling is strongly preferred. For conforming high-quality SVG viewers, the user agent shall employ a resampling algorithm at least as good as bilinear resampling.
`optimizeQuality^v
[ ~UAは、描画~速さより品質を際立てるモノトスル ]ことを指示する。 ◎ Indicates that the user agent shall emphasize quality over rendering speed.\
~UAは、標本化し直す~algoとして,双線型~法~以上の品質を得るものを使役するモノトスル。 ◎ The user agent shall employ a resampling algorithm at least as good as bilinear resampling.
`optimizeSpeed^v
[ ~UAは、品質より描画~速さを際立てるモノトスル ]ことを指示する。 ◎ Indicates that the user agent shall emphasize rendering speed over quality.\
~UAは、標本化し直す~algoとして,高速な描画の目標を達成するものを利用するベキであり, かつ 最近傍~法~以上の品質を得るものを使役するモノトスル。 ~UAは、最近傍~法より高品質な~algoで処理能の目標を達成できる場合は,代わりにそれを利用するベキである。 ◎ The user agent should use a resampling algorithm which achieves the goal of fast rendering, with the requirement that the resampling algorithm shall be at least as good as nearest neighbor resampling. If performance goals can be achieved with higher quality algorithms, then the user agent should use the higher quality algorithms instead of nearest neighbor resampling.

すべての事例において、標本化し直すときは — 元の~dataや~target機器が `indexed^en 色であっても — `truecolor^en 色~空間(例: 24~bit)内で遂行するモノトスル。 また、高品質~SVG~viewerは,線型~色~空間【線型~化された~RGB色~空間?】を利用するベキである。 ◎ In all cases, resampling must be done in a truecolor (e.g., 24-bit) color space even if the original data and/or the target device is indexed color. High quality SVG viewers should perform image resampling using a linear color space.

13.11. `will-change^p ~propの効果

注記: `will-change$p の定義は、 `CSS Will Change Module Level 1^cite 仕様を見よ。 ◎ See the CSS Will Change Module Level 1 specification for the definition of will-change.

`will-change$p ~propは、[ 内容に為されることになる変更の種別についての~hintを,~UAに供する ]ために利用され,所与の要素~用に描画の最適化を遂行するより良い機会を~UAに与える。 ◎ The will-change property is used to provide a hint to the user agent as to the types of changes that will be made to content, giving the user agent a better chance at performing rendering optimizations for a given element.

`will-change$p ~propは、すべての~SVG `~graphics要素$に適用される。 しかしながら,~SVG要素は~scroll法を~supportしないので、 `scroll-position^v 値による効果は無い。 ◎ The will-change property applies to all SVG graphics elements, however since SVG elements do not support scrolling, the scroll-position value will have no effect on them.

次の例に、 `will-change$p を利用して[ 要素~上の `transform$p ~propが変更されることになる ]ことを~UAに事前警告できる様子をデモる — その結果,~UAは、 `transform$p に対する~scriptによる変更が滑らかに現れるよう,要素を自前の~GPU層の中へ描画し得る。 ◎ The following example demonstrates how will-change can be used to forewarn the user agent that an element will have its transform property changed, with the potential result of the user agent rendering the element into its own GPU layer so that the scripted transform changes appear smooth.

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    #background { fill: lemonchiffon; }
    #star {
      fill: cornflowerblue;
      stroke: navy; stroke-width: 5px; stroke-linejoin: round;
      paint-order: stroke fill;
      will-change: transform;
    }
    text { font: 24px sans-serif; user-select: none; }
  </style>
  <g onmousemove="drag(evt.clientX, evt.clientY);"
     onmouseup="dragging = false;">
    <rect id="background" width="100%" height="100%"/>
    <text x="10" y="30">Drag the star!</text>
    <path id="star" transform="translate(200,150)"
          d="M 0.00,-40.00 -11.76,-16.18 -38.04,-12.36 -19.02,6.18 -23.51,32.36
               0.00,20.00 23.51,32.36 19.02,6.18 38.04,-12.36 11.76,-16.18 z"
          onmousedown="dragging = true;"/>
  </g>
  <script>
    var %dragging = false;
    var %star = document.getElementById("star");
    function drag(%x, %y) {
      if (%dragging) {
        %star.setAttribute("transform", "translate(" + x + "," + y + ")");
      }
    }
  </script>
</svg>
`will-change-image^dgm
~SVG要素~上で `will-change$p を~supportする~UAにおいては、星形( %star )は — ~canvas周りで~dragされるとき,素早く組成できるよう — ~GPU層の中へ描画され得る(これを 対話的な~SVG文書で閲覧する )。 ◎ In a user agent that supports will-change on SVG elements, the star might be rendered into a layer so that it can be composited quickly when it is dragged around the canvas. View interactive SVG document.

注記: `will-change$p ~propは、 `SVG Tiny 1.2^cite に定義された `buffered-rendering^p ~propを置換する。 ◎ The will-change property replaces the ‘buffered-rendering’ property defined in SVG Tiny 1.2.

13.12. ~DOM~interface

13.12.1. ~interface `SVGMarkerElement^I0

`SVGMarkerElement$I ~objは、~DOM内で `marker$e 要素を表現する。 ◎ An SVGMarkerElement object represents a ‘marker’ element in the DOM.

[Exposed=Window]
interface SVGMarkerElement : `SVGElement$I {

  // Marker Unit Types
  const unsigned short `SVG_MARKERUNITS_UNKNOWN$m = 0;
  const unsigned short `SVG_MARKERUNITS_USERSPACEONUSE$m = 1;
  const unsigned short `SVG_MARKERUNITS_STROKEWIDTH$m = 2;

  // Marker Orientation Types
  const unsigned short `SVG_MARKER_ORIENT_UNKNOWN$m = 0;
  const unsigned short `SVG_MARKER_ORIENT_AUTO$m = 1;
  const unsigned short `SVG_MARKER_ORIENT_ANGLE$m = 2;

  [SameObject] readonly attribute `SVGAnimatedLength$I `refX$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `refY$m;
  [SameObject] readonly attribute `SVGAnimatedEnumeration$I `markerUnits$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `markerWidth$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `markerHeight$m;
  [SameObject] readonly attribute `SVGAnimatedEnumeration$I `orientType$m;
  [SameObject] readonly attribute `SVGAnimatedAngle$I `orientAngle$m;
  attribute DOMString `orient$m;

  void `setOrientToAuto$m();
  void `setOrientToAngle$m(`SVGAngle$I angle);
};

`SVGMarkerElement$I includes `SVGFitToViewBox$I;

`SVGMarkerElement$I 上に定義される各種 ~marker単位~型の数量-定数は、 `markerUnits$a 属性がとり得る~keyword値を表現するために利用される。 それらの意味は、次に従う: ◎ The numeric marker unit type constants defined on SVGMarkerElement are used to represent the keyword values that the ‘markerUnits’ attribute can take. Their meanings are as follows:

定数 意味
`SVG_MARKERUNITS_USERSPACEONUSE@m `userSpaceOnUse^v ~keyword
`SVG_MARKERUNITS_STROKEWIDTH@m `strokeWidth^v ~keyword
`SVG_MARKERUNITS_UNKNOWN@m 他の何らかの値
◎ Constant Meaning SVG_MARKERUNITS_USERSPACEONUSE The userSpaceOnUse keyword. SVG_MARKERUNITS_STROKEWIDTH The strokeWidth keyword. SVG_MARKERUNITS_UNKNOWN Some other value.

`SVGMarkerElement$I 上に定義される各種 ~marker方位~型の数量-定数は、 `orient$a 属性がとり得る型の値を表現するために利用される。 それらの意味は、次に従う: ◎ The numeric marker orientation type constants defined on SVGMarkerElement are used to represent the types of values that the ‘orient’ attribute can take. Their meanings are as follows:

定数 意味
`SVG_MARKER_ORIENT_AUTO@m `auto^v ~keyword
`SVG_MARKER_ORIENT_ANGLE@m 方位~角度を指示している[ `angle$t / `number$t ]値
`SVG_MARKER_ORIENT_UNKNOWN@m 他の何らかの値
◎ Constant Meaning SVG_MARKER_ORIENT_AUTO The auto keyword. SVG_MARKER_ORIENT_ANGLE An <angle> or <number> value indicating the orientation angle. SVG_MARKER_ORIENT_UNKNOWN Some other value.
`markerUnits@m
`markerUnits$a 内容~属性を`反映する$。 `markerUnits$a 用の`数量-型~値$は、上の数量-~marker単位~型~定数~表に述べた。 ◎ The markerUnits IDL attribute reflects the ‘markerUnits’ content attribute. The numeric type values for ‘markerUnits’ are as described above in the numeric marker unit type constant table.
`orientType@m
`orientAngle@m
`orient@m

どれも, `orient$a 内容~属性を`反映する$。 `orient$a 用の`数量-型~値$は、次に従う: ◎ The orientType, orientAngle and orient IDL attributes all reflect the ‘orient’ content attribute. The numeric type values for ‘orient’ are as follows:

数量-型~値
`auto^v `SVG_MARKER_ORIENT_AUTO$m
`auto-start-reverse^v `SVG_MARKER_ORIENT_UNKNOWN$m
`angle$t | `number$t `SVG_MARKER_ORIENT_ANGLE$m
`refX@m
`refY@m
`markerWidth@m
`markerHeight@m

順に,[ `refX$a, `refY$a, `markerWidth$a `markerHeight$a ]内容~属性を`反映する$。 ◎ The refX, refY, markerWidth and markerHeight IDL attributes reflect the ‘refX’, ‘refY’, ‘markerWidth’ and ‘markerHeight’ content attributes, respectively.

`setOrientToAuto()@m
この~methodは、 `orient$a 属性の値を `auto^v に設定するために利用される。 ◎ The setOrientToAuto method is used to set the value of the ‘orient’ attribute to 'auto'.\
~callされたときは、単純に `orient$a 属性を `auto^v に設定する。 ◎ When setOrientToAuto() is called, the ‘orient’ attribute is simply set to 'auto'.
`setOrientToAngle(angle)@m
この~methodは、 `orient$a 属性の値を特定の角度~値に設定するために利用される。 ◎ The setOrientToAngle method is used to set the value of the ‘orient’ attribute to a specific angle value.\
~callされたときは、 `orient$a 属性を %angle で`直列化し直す$。 【此れの `orient$m 属性に %angle の `valueAsString$n が返す値を設定したときと同じに挙動する。】 ◎ When setOrientToAngle(angle) is called, the ‘orient’ attribute is reserialized using angle as the value.