HTML マークアップで SVG を直接使用すると、ボタンに役割を割り当てたり、必要なホバー効果を付与したりすることができません

2 つの機能を実行するアイコンを持つコンテナがあります: ボタンのように動作します (キーボード/スクリーン リーダーなどを介してアクセス可能) ホバー/フォーカスで赤になります。 マークアップ内で SVG を直接使用すると、ホバー効果が停止します。期待どおりに機能しますが、img タグを使用する場合のように SVG にボタンの役割を割り当てることはできません: .container{height:500px;width:400px;background-color:lightblue;position:relative;}.favorite

P粉940538947 2023-09-06 20:29:59 0  1  645

<svg> 要素を使用してひし形の形状を作成するにはどうすればよいですか?

HTML5 要素を使用してひし形の形状を作成しようとしています。点を指定したのですが、ひし形に塗りつぶされるのではなく、一対の三角形に塗りつぶされてしまいました。これが私のアプローチです: <div><svgwidth="2000"height="2000"><polygonpoints="2525,7525,5050,500"style="fill:blue;strok

P粉043295337 2023-08-26 12:41:30 0  1  532

CSSを使用したNVG効果

CSS を使用して NVG エフェクトを作成しようとしていますが、どこから始めて、グローやノイズのエフェクトなどを追加する方法がわかりません。誰かが何かヒントを知っているか、同様のことを試したことがある場合は、私をガイドしてください、ありがとう<3

P粉832490510 2024-02-26 20:37:50 0  2  453

グレースケール SVG がアルファに変換されると明るさが低下するのはなぜですか?

SVGを使用して透明な「星空」効果を作成しようとしています。 Web ページ上の黒い背景要素内に SVG をインラインで配置しています。まず乱流フィルターから始めて、次にカラー マトリックスを適用して目的の効果を実現しました。 <svgxmlns="http://www.w3.org/2000/svg"><filterid="filter"><feTurbulencebaseFrequency="0.2&q"

P粉986937457 2024-02-26 18:01:19 0  1  368

React を使用した HTML の SVG パス セレクター

ユーザーがSVGをアップロードできるペイントアプリケーションを作成しています。さまざまな色で塗りつぶし、SVG 上に描画してから消去します。しかし、残念ながらSVGのパスを取得できません。以下は SVG 画像です。ホバーした場合、そのホバー パスのパスを取得し、選択した色で塗りつぶしたいだけです。 Canvas パスと SVG パスを試してみました。しかし、運がありません。 Canvas には beginPath メソッドがあり、SVG を描画するために使用します。 <?xmlversion='1.0'encoding='utf-8'?&

P粉566048790 2023-09-01 23:22:48 0  1  638

vue および vuetify コンポーネントに対するマウスオーバー効果

そこで、次の記事の例に示すようにマウスオーバー効果を再作成しようとしました: https://blog.prototypr.io/stunning-hover-events-with-css-variables-f855e7b95330 しかし、私の場合は Vue を使用したいと考えています。 vuetify ライブラリから v-card にホバー効果を適用する .js。これが私の試みです: https://codepen.io/pokepim/pen/NWdwOEq

P粉032649413 2024-03-27 16:31:16 0  1  551

:hover 効果を複数の要素に動的に追加する

プログラムで複数の要素にホバー効果を追加することはできますか?私たちのシステムでは、単一のユニットを表す複数の要素が存在します (ただし、他の理由で複数の要素に分ける必要があります)。場合によっては、ホバー時に一緒に色を変更する必要があります。プログラムで複数の要素にホバー効果を追加することは可能ですか?それともこれは良い習慣なのでしょうか？ my_own_css_class を使用し、ホバー時にすべての要素に追加することで、この問題を解決できました。しかし、プログラムでホバー効果を持たせるとうまくいくかもしれないと感じています

P粉203792468 2023-08-15 23:49:58 0  1  545

Psuedo 要素の CSS ホバー効果を使用してメイン要素をオーバーラップする

基本的に、ホバーしたときの効果は次のようになります。 私の Web サイトのコードは次のとおりです。無視してください。重要: .cta-button-menu,.cta-button-menu::before{transition:all0.3slinear!重要;幅:120px!重要;高さ:50px!重要;表示:インラインフレックス!重要;justify-cont

P粉838563523 2024-03-20 10:31:28 0  1  387

JavaScript - 左側のナビゲーションを拡大縮小する方法

ボタンをクリックすると、「これはプラグインを使用して行われますか?」と表示されます。ネイティブを使用する場合、ホバー効果はどうあるべきですか?

三叔 2017-06-30 09:59:54 0  1  852

SVG - 複数のグラデーション塗りつぶしのある醜いエッジ

JavaScript カラーピッカーを作成したいと考えています。 SVG を使用して、次のような色の三角形を作成しています。 body{background:black;}<svgxmlns="http://www.w3.org/2000/svg"width="88"height="88"class= 「彩度-明るさ」&

P粉937769356 2024-04-01 20:00:27 0  1  441

ホバー時にコンテンツを表示します (カードの高さには影響しません)

ホバー時に表示されるコンテンツを含むブロックがあります。効果の動作方法は次のとおりです。 .hoverCard は、デフォルトで基礎となるコンテンツを表示します (.hoverCard__showOnHover のコンテンツは非表示になります)。 ユーザーが .hoverCard の上にマウスを移動すると、.hoverCard__showOnHover がそのコンテンツを表示し、.hoverCard__body が上に遷移します (「開いた状態」になります)。効果) 上記の視覚効果はデモで確認できますが、アニメーションを完全に動作させることはできません。会いました

P粉289775043 2024-03-27 20:29:28 0  1  495

JavaScript - CSS3 移行の互換性の問題

TV ボックスでトランジションを使用します。互換性の後も、transition:transform .1s Linear にはトランジション効果がありませんが、すべての属性にトランジションを持たせたくないため、transition:all .1s Linear を使用すると効果があります。その理由は何ですか? ?アドバイスをお願いします、よろしくお願いします。

ringa_lee 2017-05-19 10:29:36 0  1  680

javascript - 少し混乱していますが、なぜ直接checked=trueを使用してjsのタグに効果を追加できるのでしょうか?

例: js を使用して、選択した効果をボタンに追加する必要があります。 js で oDiv.checked = true を直接使用して、選択した効果を追加できるのはなぜですか?なぜ途中にスタイルを追加する必要がないのでしょうか?色の場合、これは oDiv.style.color = "red" になります。

阿神 2017-06-26 10:55:27 0  2  820

php - mysql では、主キーフィールドとして char 型よりも int 型を使用する方が効率的ですか?

mysqlでは、主キーフィールドとしてchar型よりint型を使用した方が効率的ですか?ビジネス要件により、タイムスタンプと 2 つの乱数を使用して ID を形成する必要があります。例: 149561542040、合計 12 桁。 ID フィールドで整数 bigint を使用する場合、char を使用するよりも効率的になりますか?

黄舟 2017-05-25 15:08:20 0  2  850

object-c - IOS でアバターを選択するための NetEase Cloud Music の ImagePicker を実装する方法

ImagePicker の概要を読んだ後、その多くは、ユーザーがカメラまたは写真の使用を選択する方法を使用します。しかし、NetEase Cloud Music では、写真ギャラリーの横にカメラを追加してアバターが変更されていることがわかりました。効果は写真の通りですが、このような効果を得る方法があればお聞きしたいです。

巴扎黑 2017-05-31 10:31:51 0  1  797

javascript - JSイベントのバブリングの問題

一件落着: この効果を実現するには CSS を使用します。ご協力いただきありがとうございます。この効果を実現するために CSS の使用に切り替えました。 1. 次のコードでは、a タグのマウスオーバー イベントとマウスアウト イベントをリッスンしてキャンバス アニメーションをトリガーし、マウスオーバーとマウスアウトのコールバックでイベントがバブリングしないようにしましたが、マウスが移動すると...

学习ing 2017-06-12 09:32:56 0  3  864

javascript - jqueryはどのようにして先頭の下に.sortスタイルを使用してすべてのクエリを実行しますか?

silibing プロンプトの使用は、クリック トリガーの後は使用できません。 。目的の効果は、クリックした後、同じレベルにある .sort スタイルを使用して、追加されたすべての .add スタイルを検索することです。 {コード...}

滿天的星座 2017-06-26 10:52:19 0  4  924

linux - libpcap パケット キャプチャの結果が不完全ですか?

Ubuntu 14.04 で libpcap を使用してパケットをキャプチャし、http を使用して送信された HTML を取得したいと考えていますが、得られた結果は同じ状況で Wireshark で取得したデータと一致しません。 現在のコードは次のとおりです。 {code...} サーバーには単純な HTML があり、ブラウザを使用してサーバー http://123... にアクセスします。

伊谢尔伦 2017-05-16 13:24:16 0  1  710

サーバー - Nginx ログ ファイルの分析によって取得された IP ソースが間違っているのはなぜですか?

Python を使用して Nginx の access.log ログ ファイルを処理し、IP を取得した後、www.ipip.net の API を使用して、結果が予想したものと大きく異なることがわかりました。表示されないのはどれですか? nginx の access.log はデフォルトの形式を採用していますか?

阿神 2017-05-16 17:18:31 0  1  612

angular.js - $ionicModal がブーストラップと競合する

$ionicModal を使用してモデル ウィンドウ プロジェクトをポップアップします。boostrap3.3.4 を導入すると、モデル ウィンドウはアニメーションやコンテンツのない黒いモーダル レイヤーになります。コードは非常に簡単です。特別な効果はありません。ただし、効果はありません。

黄舟 2017-05-15 16:53:04 0  1  676