BinaryDevelop
  1. ホーム
  2. html

[解決済み] HTMLでSVGを使用して三日月を描画する

2022-02-02 10:29:16

質問

HTMLでSVGを使用して三日月を描くことは可能でしょうか？ でいろいろ試しているのですが W3スクール が、その例が見当たりません。 三日月」の典型的なグーグル画像に見られるような陰影は必要なく、ただ無地の縁取りのある三日月があればいいのです。

どのように解決するのですか？

私の解決策がベストでない可能性があることをご了承ください。私はベクターグラフィックの専門家ではないので、他の解決策を探した方が良いでしょう。

私がとった方法は、同じ背景を持つ別の画像を描くことです。以下のような感じになります。

余分なボーダーをなくすために、その上にもう一つ円を描きます。

3枚目の画像のボーダーを白にすると、次のようになります。

ボーダーを使用しない場合は、2つの円を使用するだけです。

また、以下のサイトもご覧ください。 クリッピングとマスキング . より良い方法かもしれません。 

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
   <circle cx="115" cy="50" r="30" stroke="black" stroke-width="2" fill="white" />
   <circle cx="130" cy="50" r="23" stroke="white" stroke-width="2" fill="white" />
</svg> 

</body>
</html>

余談：W3Schoolsはあまり当てにならない参考文献です。間違った情報や古い情報でいっぱいです。もっと良い資料があります。

  1. モジラ開発者ネットワーク
  2. ウェブプラットフォーム

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します