patternUnits
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2020å¹´1æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
patternUnits 屿§ã¯ã <pattern> è¦ç´ ã®å¹¾ä½ããããã£ã«ã©ã®åº§æ¨ç³»ã使ç¨ãããã示ãã¾ãã
ãã®å±æ§ã¯ä»¥ä¸ã® SVG è¦ç´ ã§ä½¿ç¨ãããã¨ãã§ãã¾ãã
ä¾
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<!-- ãã¹ã¦ã®å¹¾ä½ããããã£ã¯ãç¾å¨ã®ã¦ã¼ã¶ã¼ç©ºéããã®ç¸å¯¾å¤ã§ãã -->
<pattern
id="p1"
x="12.5"
y="12.5"
width="25"
height="25"
patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" />
</pattern>
<!-- ãã¹ã¦ã®å¹¾ä½ããããã£ã¯ã対象ã¨ãããã¦ã³ãã£ã³ã°ããã¯ã¹ããã®ç¸å¯¾å¤ã§ãã -->
<pattern
id="p2"
x=".125"
y=".125"
width=".25"
height=".25"
patternUnits="objectBoundingBox">
<circle cx="10" cy="10" r="10" />
</pattern>
<!-- Left square with user space tiles -->
<rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
<!-- Right square with bounding box tiles -->
<rect x="110" y="10" width="80" height="80" fill="url(#p2)" />
</svg>
è¦ç´
ãã®å±æ§ã¯ãä¸è¨ã§ç¤ºã SVG è¦ç´ ã§ä½¿ç¨ãããã¨ãã§ãã¾ãã
<pattern>
<pattern> ã®å ´åã patternUnits ã¯è¦ç´ ã®å¹¾ä½ããããã£ï¼x, y, width, heightï¼ã«ä½¿ç¨ãã座æ¨ç³»ãå®ç¾©ãã¾ãã
| å¤ | userSpaceOnUse | objectBoundingBox |
|---|---|
| æ¢å®å¤ | objectBoundingBox |
| ã¢ãã¡ã¼ã·ã§ã³ | å¯ |
userSpaceOnUse-
ãã®å¤ã¯ãå¹¾ä½ããããã£ã®ãã¹ã¦ã®åº§æ¨ãããã¿ã¼ã³ãé©ç¨ãããã¨ãã«å®ç¾©ãããã¦ã¼ã¶ã¼åº§æ¨ç³»ãåç §ãããã¨ã示ãã¾ãã
objectBoundingBox-
ãã®å¤ã¯ãå¹¾ä½ããããã£ã®ãã¹ã¦ã®åº§æ¨ãããã¿ã¼ã³ãé©ç¨ãããè¦ç´ ã®ãã¦ã³ãã£ã³ã°ããã¯ã¹ã®åæ°ã¾ãã¯ãã¼ã»ã³ãå¤ã表ãã¾ãããã¦ã³ãã£ã³ã°ããã¯ã¹ã¯
<pattern>ã®ã³ã³ãã³ãã"0 0 1 1"viewBoxã«ãã¤ã³ãããã¦ããã®ã¨åãã¨èãããã¨ãã§ãã¾ãã
仿§æ¸
| 仿§æ¸ |
|---|
| Scalable Vector Graphics (SVG) 2 > # PatternElementPatternUnitsAttribute > |