web-dev-qa-db-ja.com

カーソル：ポインター。 svg要素が機能していない

私のウェブサイトでは、svg要素を使用しています。時々私はそれらがクリック可能である必要があるので、私はそれらの上にポインタカーソルが欲しいです。

ただし、CSSクラスまたはスタイルを追加する

cursor: pointer;

うまくいかない。

それが要素の例です

<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" style="left: 87px; bottom: 56px;" es-character="male2"></object>

Svgではうまくいかないようです。誰が修正する方法、またはそれを回避する方法を知っていますか？

htmlcsssvgcursor
21
Skotnik

AmeliaBRのコメントが示すように、このスタイルをSVG <object>内に追加する必要があります。

また、SVGが非常にシンプルでない限り、私が抱えていた同じ問題が発生する可能性があります。SVGの図形の1つにカーソルを合わせるとポインターが表示されますが、図形間ではありません。

（場合によっては、その動作が必要な場合がありますが、たとえばワードマークの場合、通常は、個々の文字だけでなく、長方形全体をクリック可能にする必要があります。）

長方形全体をクリック可能にするには、svg { cursor: pointer; }を追加します。特定の要素をクリックするだけの場合は、クラスごとに名前を付けます。

<svg ...>
  <style>
    svg { cursor: pointer; } /* whole rectangle */

    /* OR */

    .element-name { cursor: pointer; } /* specific elements */
  </style>
  ...
</svg>
21
Zach

「cursor: pointer "svg要素に直接は機能しません。SVGと同じ次元で透明要素を追加しようとすることもできます（objectタグにある擬似要素は直接機能しません）絶対にSVGの上に配置されます。

a.svg-cursor:before {
content: "";
display: block;
position: absolute;
background-color: transparent;
cursor: pointer;
/* plus width and height of the SVG */
}
<a href="#" class="svg-cursor">
<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" es-character="male2"></object>
</a>

または、imgの代わりにobjectを使用して、「cursor: pointer "スタイルからimgへ：

<img id="male2" src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" alt="Description" />

3
Herr_Schwabullek

私はこれが他の中で最も簡単な解決策だと思います：

1）svgを<a>にラップしてクリック可能にします：

<a href="#">
    <object>
        <embed src="img.svg"></embed>
    </object>
</a>

2）object要素からポインターイベントを削除して、クリックが<a>に直接配信されるようにします。

object{
    pointer-events: none;
}

a{
    display: inline-block; /* or block if you need */
}
2
godblessstrawberry

SVGの個々の要素をスタイルするには、JavaScriptを使用するか、defsタグの画像内でCSSを使用するか、外部スタイルシートを参照します。

<svg ...>
  <defs>
    <style type="text/css"><![CDATA[
      .myfigureclass {
        cursor: pointer;
      }
    ]]></style>
  </defs>

詳細については、 このリンク を確認してください。

次のように、SVGに外部スタイルシートを使用することもできます。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.svg.css" ?>

<svg
   xmlns="http://www.w3.org/2000/svg"
   ...>
(...)
</svg>

詳細については、 このリンク を確認してください。

1
Havok

最も簡単な解決策の1つは、objectタグの代わりにimgタグを使用することです

<img src="course/ani/male2.svg" style="left: 87px; bottom: 56px;"  />

ただし、理想的には、svgをhtmlに埋め込むことができます。それはあなたにsvgファイルをキャッシュさせないので、javascriptを使用してsvgファイルをテキストとしてロードし、キャッシングが許可されたDOMに挿入し、DOMに直接SVGを取得して、すべてのcssスタイルを使用できるようにしましたページ。

0
Garr Godfrey