WebKitã§ã®SVGを背景画åƒã«ã™ã‚‹ã¨èµ·ã“ã‚‹ãƒã‚°SVGã¯ãã®ãƒªã‚µã‚¤ã‚º(スケーリング)ã«ãŠã„ã¦ãƒ–ラウザ間ã§å·®ç•°ã‚„ãƒã‚°ãŒã‚ã‚Šã¾ã™ã€‚有åãªã®ã¯viewBoxãŒãªã„ã“ã¨ã«ã‚ˆã‚‹IE9ã‚„WebKitã§ã®ãƒã‚°ã§ã—ょã†ã‹ã€‚ãã‚Œã§ã‚‚imgè¦ç´ ç‰ã§SVGを使ã†å ´åˆã¯SVGå´ã§widthã¨heightãã—ã¦viewBox属性を指定ã—ã€CSSãªã©ã§ãƒªã‚µã‚¤ã‚ºã™ã‚Œã°å¤§ä½“å•é¡Œã‚ã‚Šã¾ã›ã‚“。ãªã®ã§èƒŒæ™¯ç”»åƒã§ä½¿ã†å ´åˆã‚‚background-sizeプãƒãƒ‘ティーを使ãˆã°â€¦â€¦ã¨æ€ã„ãã‚„ã€ãªã‹ãªã‹ã®è½ã¨ã—ç©´ãŒã‚ã‚Šã¾ã—ãŸã€‚ Demo: SVG Arrow WebKit以外ã§ã¯è‡ªå‹•ãƒªã‚µã‚¤ã‚ºãŒæœŸå¾…ã•ã‚Œã‚‹viewBoxã®ã¿æŒ‡å®šã—ãŸSVGを背景画åƒã«ã™ã‚‹ã¨å•é¡Œãªãã‚レイã«ãƒªã‚µã‚¤ã‚ºã•ã‚Œã¾ã™ã€‚対ã—ã¦WebKitã§ã¯ãƒªã‚µã‚¤ã‚ºã•ã‚ŒãŸã‚Šã•ã‚Œãªã‹ã£ãŸã‚Šã§ã™ã€‚ã—ã‹ã‚‚Chromeã¨Safariã§ã¯æŒ™å‹•ãŒå°‘ã—é•ã£ãŸã‚Šã‚‚ã—ã€è¿½æ±‚ã™ã‚‹æ°—ãŒå¤±ã›ã‚‹ã»ã©æŒ™å‹•ä¸å¯©ã§ã™ã€‚ã©ã†ã‚‚良ãã«è¨ˆã‚‰ã£ã¦ã¯ãã‚Œãã†ã«ãªã„ã®ã§ã€æ˜Žç¤ºçš„
{{#tags}}- {{label}}
{{/tags}}