質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.83%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

Q&A

解決済

SVGの縦線と横線の太さを同じにしたい

nekonekopun
nekonekopun

総合スコア11

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

1回答

0グッド

0クリップ

197閲覧

投稿2023/03/31 11:51

SVGの縦線と横線の太さを同じにしたい

SVGで縦線と横線を同じ太さで描きたいのですが、微妙に横線が太く薄くなってしまいます。直すにはどこを修正すれば良いでしょうか。

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="891" height="630" version="1.1" viewBox="0 0 297 210" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css"> <![CDATA[ .str0 {stroke:black;stroke-width:1;} .fil0 {fill:none} ]]> </style> </defs> <g> <line class="str0" x1="148.5" y1="0" x2="148.5" y2= "210" /> <line class="str0" x1="0" y1="105" x2="297" y2= "105" /> <circle class="str0 fil0" cx="148.5" cy="105" r="40" fill="#ff0000" /> </g> </svg>

イメージ説明

試したこと

viewboxの理解不足等から描画領域全体が縦に引き延ばされているのかと思い、中央に円を描いてみたのですが、
てっきり縦に引き延ばされた楕円になると思いきや真円が表示されてしまいました。

補足情報

chromeで。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

html

1width="891" height="630" version="1.1" viewBox="0 0 297 210" 2・・・・ 3<line class="str0" x1="148.5" y1="0" x2="148.5" y2= "210" /> 4<line class="str0" x1="0" y1="105" x2="297" y2= "105" /> 5<circle class="str0 fil0" cx="148.5" cy="105" r="40" fill="#ff0000" />

小数点と、奇数を一切使わないようにすれば直るはずです。

モニターの最小は1px(1ドット)なので、
それ以下の端数が出るとアンチエイリアスのような処理がかかり、
色が変わったように見えたり、ボケたように見えることがあります。

投稿2023/03/31 11:58

編集2023/03/31 12:13
pippi19

総合スコア662

nekonekopun👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

nekonekopun

2023/04/01 05:30

なるほど、そういうことなのですね。 ありがとうございました。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.83%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。