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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Inkscape

Inkscape(インクスケープ)はオリジナル画像やオリジナルロゴの作成、写真の加工が出来るソフトです

Q&A

解決済

1回答

714閲覧

HTMLでのsvg要素のエリア設定について

sanezane

総合スコア91

SVG

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Inkscape

Inkscape(インクスケープ)はオリジナル画像やオリジナルロゴの作成、写真の加工が出来るソフトです

0グッド

1クリップ

投稿2018/05/22 02:16

編集2018/05/22 03:30

困っていること・現状

svg要素のサイズをhtmlの中で指定しているのですが、画面をブラウザで表示し検証すると横幅いっぱいにマウスオーバーcssが効いている。そのためsvgの絵の外でマウスオーバーした場合でも画面が赤くなってしまう。
イメージ説明

やりたいこと

svgの絵の大きさでマウスオーバーでの色の変化を実現したい。

試したこと

・<div class="svg-area"...の中に直接 rectのwidth,height,x,y,fillを入れてみた→色がなくなった(透明)
※svgの領域自体は確認できました。

html

1<div class="svg-area" width="100" height="100" x=...省略...y=...省略>

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

現状のコード

html

1<div class="svg-area"> 2 <svg class="クラス" onclick="window.location.href='/URL/';"> 3 4 <rect data-name="deta-name"id="rect815"width="100"height="100"x="34.773811"y="36.19643" /> 5 <text x="85" y="90" text-anchor="middle">テキスト</text> 6 7 </svg> 8</div>

css

1 .ATC { 2 fill: #76fc29; 3 fill-opacity: 1; 4 stroke: #000000; 5 stroke-width: 1; 6 stroke-opacity: 1 7 } 8 9 .ATC:hover { 10 fill: #ff0000; 11 }

お力をお貸し下さい。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

質問の内容から
<div class="svg-area">

<div class="ATC">
の間違いであると判断して回答します。

「svgの絵」というのが現状のコードのsvg要素の範囲を指すのかrect要素の範囲を指すのかが不明ですが、

svg要素の場合

html

1<div> 2 <svg class="ATC" onclick="window.location.href='/URL/';"> 3 4 <rect data-name="deta-name"id="rect815"width="100"height="100"x="34.773811"y="36.19643" /> 5 <text x="85" y="90" text-anchor="middle">テキスト</text> 6 </svg> 7</div>
rect要素の場合

html

1<div> 2 <svg onclick="window.location.href='/URL/';"> 3 4 <rect class="ATC" data-name="deta-name"id="rect815"width="100"height="100"x="34.773811"y="36.19643" /> 5 <!-- text要素の上にカーソルが来た場合にもrect要素のhoverが動作するようマウスイベントを無効化 --> 6 <text style="pointer-events: none;" x="85" y="90" text-anchor="middle">テキスト</text> 7 </svg> 8</div>

というようにATCクラスを適応する対象を変えることで期待した動作にならないでしょうか?

投稿2018/05/22 03:19

編集2018/05/22 07:38
PgMidori

総合スコア184

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問