SVG 㨠CSS
ãã®ãã¼ã¸ã§ã¯ãã°ã©ãã£ãã¯ãä½æããããã®ç¹æ®è¨èªã§ãã SVG ã¸ã® CSS ã®é©ç¨ã«ã¤ãã¦èª¬æãã¾ãã
以ä¸ã§ã¯ããã©ã¦ã¶ã¼ã§å®è¡ãããã¢ãä½æãã¾ãã
ã¡ã¢:
<use> è¦ç´ ã«ãã£ã¦åç
§ãããè¦ç´ ã¯ããã®è¦ç´ ã®ã¹ã¿ã¤ã«ãç¶æ¿ãã¾ãããããã£ã¦ããããã«ç°ãªãã¹ã¿ã¤ã«ãé©ç¨ããã«ã¯ã CSS ã«ã¹ã¿ã ããããã£ã使ç¨ãã¾ãããã
ä¾
ãã¬ã¼ã³ããã¹ããã¡ã¤ã«ã¨ãã¦æ°ãã SVG ææ¸ doc8.svg ãä½æãã¦ãã ãããããããã³ã³ãã³ããã³ãã¼ãã¦è²¼ãä»ãã¦ãã ãããã¹ã¯ãã¼ã«ãã¦ãã¹ã¦ãåå¾ããããã«ãã¦ãã ããã
html
<svg
width="600px"
height="600px"
viewBox="-300 -300 600 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<link
xmlns="http://www.w3.org/1999/xhtml"
rel="stylesheet"
href="style8.css"
type="text/css" />
<title>SVG ã®ãã¢</title>
<desc>Mozilla CSS Getting Started - SVG ã®ãã¢</desc>
<defs>
<radialGradient
id="fade"
cx="0"
cy="0"
r="200"
gradientUnits="userSpaceOnUse">
<stop id="fade-stop-1" offset="33%" />
<stop id="fade-stop-2" offset="95%" />
</radialGradient>
</defs>
<text id="heading" x="-280" y="-270">SVG ã®ãã¢</text>
<text id="caption" x="-280" y="-250">
ãã¦ã¹ãã¤ã³ã¿ã¼ãè±ã®ä¸ã§ç§»åããã¾ãããã
</text>
<g id="flower">
<circle
id="overlay"
cx="0"
cy="0"
r="200"
stroke="none"
fill="url(#fade)" />
<g id="outer-petals">
<g class="quadrant">
<g class="segment">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(18)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(36)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(54)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(72)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
</g>
<g class="quadrant">
<g class="segment" transform="rotate(90)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(108)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(126)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(144)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(162)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
</g>
<g class="quadrant">
<g class="segment" transform="rotate(180)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(198)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(216)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(234)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(252)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
</g>
<g class="quadrant">
<g class="segment" transform="rotate(270)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(288)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(306)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(324)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(342)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
</g>
</g>
<g id="inner-petals" transform="rotate(9) scale(0.33)">
<g class="quadrant">
<g class="segment">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(18)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(36)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(54)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(72)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
</g>
<g class="quadrant">
<g class="segment" transform="rotate(90)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(108)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(126)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(144)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(162)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
</g>
<g class="quadrant">
<g class="segment" transform="rotate(180)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(198)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(216)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(234)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(252)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
</g>
<g class="quadrant">
<g class="segment" transform="rotate(270)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(288)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(306)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(324)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g class="segment" transform="rotate(342)">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
</g>
</g>
</g>
</svg>
doc8.svg ã¨åããã£ã¬ã¯ããªã¼ã«æ°ãã CSS ãã¡ã¤ã« style8.css ãä½æãã¾ããããããã«ããã³ã³ãã³ããã³ãã¼ï¼ãã¼ã¹ãããã¹ã¯ãã¼ã«ãã¦ãã¹ã¦åå¾ããããã«ãã¦ãã ããã
css
/*** SVG ã㢠***/
/* page */
svg {
background-color: beige;
}
#heading {
font-size: 24px;
font-weight: bold;
}
#caption {
font-size: 12px;
}
/* flower */
#flower:hover {
cursor: crosshair;
}
/* gradient */
#fade-stop-1 {
stop-color: blue;
}
#fade-stop-2 {
stop-color: white;
}
/* petals */
.segment-fill {
fill: var(--segment-fill-fill);
stroke: var(--segment-fill-stroke);
stroke-width: var(--segment-fill-stroke-width);
}
.segment-fill:hover {
fill: var(--segment-fill-fill-hover);
stroke: var(--segment-fill-stroke-hover);
}
.segment-edge {
fill: var(--segment-edge-fill);
stroke: var(--segment-edge-stroke);
stroke-width: var(--segment-edge-stroke-width);
}
.segment-edge:hover {
stroke: var(--segment-edge-stroke-hover);
}
/* outer petals */
#outer-petals {
opacity: 0.75;
--segment-fill-fill: azure;
--segment-fill-stroke: lightsteelblue;
--segment-fill-stroke-width: 1;
--segment-edge-fill: none;
--segment-edge-stroke: deepskyblue;
--segment-edge-stroke-width: 3;
--segment-fill-fill-hover: plum;
--segment-fill-stroke-hover: none;
--segment-edge-stroke-hover: slateblue;
}
/*
ä¸é¨ã®å¤ããã©ã¦ã¶ã¼ã§å¯¾å¿ãã¦ããã<use> è¦ç´ ãä»ãã¦è¦ç´ ã®ã¹ã¿ã¤ã«è¨å®ã
åç
§ããæ¨æºçã§ãªãæ¹æ³ã
*/
#outer-petals .segment-fill {
fill: azure;
stroke: lightsteelblue;
stroke-width: 1;
}
#outer-petals .segment-edge {
fill: none;
stroke: deepskyblue;
stroke-width: 3;
}
#outer-petals .segment:hover > .segment-fill {
fill: plum;
stroke: none;
}
#outer-petals .segment:hover > .segment-edge {
stroke: slateblue;
}
/* inner petals */
#inner-petals {
--segment-fill-fill: yellow;
--segment-fill-stroke: yellow;
--segment-fill-stroke-width: 1;
--segment-edge-fill: none;
--segment-edge-stroke: yellowgreen;
--segment-edge-stroke-width: 9;
--segment-fill-fill-hover: darkseagreen;
--segment-fill-stroke-hover: none;
--segment-edge-stroke-hover: green;
}
/*
ä¸é¨ã®å¤ããã©ã¦ã¶ã¼ã§å¯¾å¿ãã¦ããã<use> è¦ç´ ãä»ãã¦è¦ç´ ã®ã¹ã¿ã¤ã«è¨å®ã
åç
§ããæ¨æºçã§ãªãæ¹æ³ã
*/
#inner-petals .segment-fill {
fill: yellow;
stroke: yellow;
stroke-width: 1;
}
#inner-petals .segment-edge {
fill: none;
stroke: yellowgreen;
stroke-width: 9;
}
#inner-petals .segment:hover > .segment-fill {
fill: darkseagreen;
stroke: none;
}
#inner-petals .segment:hover > .segment-edge {
stroke: green;
}
SVG 対å¿ã®ãã©ã¦ã¶ã¼ã§ doc8.svg ææ¸ãéãã¦ãã ããããã¦ã¹ãã¤ã³ã¿ã¼ãã°ã©ãã£ãã¯ã®ä¸ã§ç§»åãã¦ä½ãèµ·ãããè¦ã¦ãã ããã
çµæ
ãã®ãã¢ã«ã¤ãã¦ã®ã¡ã¢ã§ãã
-
SVG ææ¸ã¯ä»¥ä¸ã® HTML
<link>ã¿ã°ãç¨ãã¦ã¹ã¿ã¤ã«ã·ã¼ãããªã³ã¯ãã¦ãã¾ããhtml<link rel="stylesheet" href="style8.css" type="text/css" />ã¾ãã
<style>ã¿ã°å ã®@importã«ã¼ã«ã§ãªã³ã¯ãããã¨ãã§ãã¾ããhtml<style> @import "style8.css"; </style> -
SVG ã¯èªåèªèº«ã§ CSS ããããã£ã¨å¤ãæã£ã¦ãã¾ãããããã®ããã¤ã㯠HTML ã® CSS ããããã£ã¨ä¼¼ã¦ãã¾ãã
ç·´ç¿
å¤å´ã®è±ã³ããåä½ããæ¹æ³ã¯å¤ããã«ãå å´ã®è±ã³ãã®ã©ããã«ãã¦ã¹ãã¤ã³ã¿ã¼ãéãªã£ãã¨ãã«å å´ã®è±ã³ãããã¹ã¦ãã³ã¯ã«ãªãããã«ã¹ã¿ã¤ã«ã·ã¼ããå¤æ´ãã¾ãããã
æ§é ã®ç°¡ç¥å
ä¸ã«ç¤ºãã SVG æ§é ã¯ã <use> è¦ç´ ãä»ãã¦è±ã®åé¨åãåç
§ãããã¨ã§ãããç°¡æ½ã«æ¸ããã¨ãã§ãã¾ãããã®åä½ã¯æ¨æºåããã¦ãã¾ãããä»ã®ã¨ãã <use> è¦ç´ ã§åç
§ãããè¦ç´ ã«å¯¾ã㦠:hover æ¬ä¼¼ã¯ã©ã¹ã¨ä»ã®è¤é㪠CSS ã»ã¬ã¯ã¿ã¼ã«å¯¾å¿ãã¦ãããã©ã¦ã¶ã¼ã¯ããã¤ãããããã¾ããããã®ãããªåç
§ããè¦ç´ ã«ã©ã®ãããªã«ã¼ã«ãé©ç¨ããããã«ã¤ãã¦ã®èª²é¡ãããã¾ãã
ãã®ã¨ãã®æ§é ã¯ä¸è¨ãã覧ãã ããã
html
<svg
width="600px"
height="600px"
viewBox="-300 -300 600 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<link
xmlns="http://www.w3.org/1999/xhtml"
rel="stylesheet"
href="style8.css"
type="text/css" />
<title>SVG ãã¢</title>
<desc>Mozilla CSS Getting Started - SVG ãã¢</desc>
<defs>
<g id="segment" class="segment">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
</g>
<g id="quadrant">
<use href="#segment" />
<use href="#segment" transform="rotate(18)" />
<use href="#segment" transform="rotate(36)" />
<use href="#segment" transform="rotate(54)" />
<use href="#segment" transform="rotate(72)" />
</g>
<g id="petals">
<use href="#quadrant" />
<use href="#quadrant" transform="rotate(90)" />
<use href="#quadrant" transform="rotate(180)" />
<use href="#quadrant" transform="rotate(270)" />
</g>
<radialGradient
id="fade"
cx="0"
cy="0"
r="200"
gradientUnits="userSpaceOnUse">
<stop id="fade-stop-1" offset="33%" />
<stop id="fade-stop-2" offset="95%" />
</radialGradient>
</defs>
<text id="heading" x="-280" y="-270">SVG ã®ãã¢</text>
<text id="caption" x="-280" y="-250">
ãã¦ã¹ãã¤ã³ã¿ã¼ãè±ã®ä¸ã§ç§»åããã¾ãããã
</text>
<g id="flower">
<circle
id="overlay"
cx="0"
cy="0"
r="200"
stroke="none"
fill="url(#fade)" />
<use id="outer-petals" href="#petals" />
<use id="inner-petals" href="#petals" transform="rotate(9) scale(0.33)" />
</g>
</svg>
次ã¯ä½ã
ãã®ãã¢ã§ã¯ã SVG 対å¿ãã©ã¦ã¶ã¼ã¯æ¢ã« SVG è¦ç´ ã®è¡¨ç¤ºæ¹æ³ãç¥ã£ã¦ãã¾ãããã®ã¹ã¿ã¤ã«ã·ã¼ãã¯ç¹å®ã®æ¹æ³ã§è¡¨ç¤ºãå¤æ´ããã ãã§ãããã㯠HTML ææ¸ã«ãå½ã¦ã¯ã¾ãã¾ããããããè¦ç´ ã®è¡¨ç¤ºæ¹æ³ããããããå®ç¾©ããã¦ããªãæ±ç¨ã® XML ææ¸ã«ã¯ CSS ã使ç¨ãããã¨ãã§ãã¾ãã次㮠XML ã®ç´¹ä»ã®ãã¼ã¸ã§ã¯ãããããã¢ãã¦ãã¾ãã