2級ウェブデザイン技能士 対策[svg] (2)

過去問題

次の設問において、正しいものは1を、間違っているものは2を該当設問の解答欄に示せ
次の SVG を使ったコードは、中心座標(50, 50)に半径 40 で緑の円を表示する。

1
2
3
<svg>
<circle cx="50" cy="50" r="40" color="green"/>
</svg>

解説

今回はsvgについての問題です。
SVGとは何か、基本的な知識については以下を参考にしてみてください。
⚪︎SVGファイルとは?基礎知識と作成・変換方法を解説

まず、svgを表示するには、<svg></svg>で囲む必要があります。
問題文と同じですね。

そしてタグには円を表示するcircle以外にも以下があります。

タグ 意味
ellipse 楕円
rect 長方形
line 直線
polyline 折れ線
polygon 多角形
path 複雑な形状

また属性には、主に以下があります

属性名 意味
width 横幅
height 高さ
x 左上を原点としたx軸座標
y 左上を原点としたy軸座標
fill 色(塗り)
stroke 色(枠線)

問題文に出てくるcx cy rの属性は、circle要素で使われるもので、
上の属性と似ていて、それぞれ、円のx軸座標円のy軸座標円の半径 を表します

解答

以上のことから
正解は2です。 color=""という属性は、circle要素に適しておらず、間違いです。
もし、図形の枠や塗りの色を指定したい場合は、fillstrokeを使用する必要があります。
そうすることで緑色の円を描くことができます。

以下はfill="green"を適用した場合です。


取り上げた問題は以下のウェブデザイン技能士検定公式サイトで公開されているものから抜粋しました
ウェブデザイン技能士検定 過去問大の公表

最後まで読んでいただきありがとうございました。

web