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  648

フェニキア文字の SVG を HTML サイトに適応させる

同じアルファベットの他の SVG で行ったように、Inkscape で作成したオープンソース SVG を実験的な Web サイトに埋め込めるように調整しようとしています。私のサイトからのフェニキア語の「mem」と「nun」SVG<svgversion="1.1"id="nān"xmlns:svg="http://www.w3.org/2000/svg"xmlns="http://www.

P粉558478150 2024-01-10 18:12:25 0  1  722

css - svgの使用に関する質問

デザイナーは、SVG と互換性がない場合は提供された PNG 画像を使用し、SVG と互換性がある場合は SVG を使用するように求めました。この互換性の問題について、Zhang Xinxu のブログに次のように書かれていました。 &lt;svg width="96" height="96"&lt;image xlink:href="svg.svg" src="svg.png" width=&quo;

高洛峰 2017-05-16 13:20:43 0  2  910

javascript - svgタグ内の要素の幅と高さをsvgタグの幅と高さに等しくするにはどうすればよいですか?

svg タグは div ボックスで囲まれています。svg の幅と高さは、外側のボックスの幅と高さの 100% に設定されています。このとき、div ボックスの幅と高さを変更します。 svgの要素の幅と高さは常にdivボックスと同じですが、svg内のパスタグは図のように幅と高さが異なります。 svg内の要素の全体の幅と高さを同じにする方法。 SV...

曾经蜡笔没有小新 2017-05-16 13:27:36 0  2  959

JavaScript - SVG初心者、SVGに画像を挿入したい

コードは上記の通りです。SVGに画像を挿入してアニメーションさせたいのですが、効果がありません。説明してください...

代言 2017-06-24 09:44:02 0  1  943

SVG パスをスケールし、mPdf を使用して変換する

こんにちは、SVG に問題があります。まず、入力タイプ ラジオを使用して SVG を HTML に配置します。ユーザーはこの SVG を（パーセント値を持つ幅スタイル属性を追加することで）拡大縮小できます。しかし、それを mpdf (JSON の SVG) に送信すると、機能しません。次に、PDF のサイズを計算しようとしますが、この SVG のビューボックス/サイズに合わせることができません。したがって、取得した SVG は次のとおりです。 PDF 上でレンダリングしたいのですが、異なる寸法で表示されます。 functiongetPrintSize(

P粉287726308 2023-08-16 17:57:54 0  1  712

JavaScript を使用して SVG 要素を生成する

JavaScript を使用して SVG 要素を作成するにはどうすればよいですか?次のコードを試しました: varsvg=document.createElement('SVG');svg.setAttribute('style','border:1pxsolidblack');svg.setAttribute('width','600');svg.setAttribute('高さ','250');svg.setAttribute

P粉662802882 2023-08-22 22:04:39 0  2  568

JavaScript - Firefox で svg 要素の高さを取得する方法。

svg 要素の clientHeight と offsetHeight は 0 で、Firefox では未定義ですが、Chrome では正常です。 SVGの高さを取得するにはどうすればよいですか? {コード...}

淡淡烟草味 2017-05-19 10:30:24 0  2  554

object タグを使用してクロスドメイン SVG コンテンツ ドキュメントを埋め込む

外部ドメイン、つまり (data="//da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e8238a87c979c0cf5b41481c982b71.svg") からのデータを含む SVG を作成し、そのオブジェクトに読み込みイベントをバインドすることは「合法」ですか?このオブジェクトの contentdocument 属性 SVGDOM を介してアクセスしますか? SVG がローカル ドメイン上にある場合はこれを行うことができますが、いつでも

P粉393030917 2023-10-31 18:04:21 0  1  1095

ウェブサイト上に変更できないアイコンがあります。助けてください。これは svg で書かれています。

Web サイト上に変更できないアイコンがあります。助けてください。 svg <div class="bar-logo"> <svg xmlns="http://www.w3.org/2000/svg" クラスで記述されています="menu-svg" "> &nb

藍錄_陈炳夷 2018-08-11 13:03:40 0  1  1126

ストローク効果のあるSVGグラデーション

このコードを見つけました<svgxmlns="http://www.w3.org/2000/svg"viewBox="-1-13434"><circlecx="16"cy="16"r="15.9155"class="プログレスバー__背景"/&

P粉193307465 2023-08-29 09:30:52 0  1  593

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  452

ブラウザで SVG を画像 (JPEG、PNG など) に変換します

JavaScript を使用して SVG をビットマップ画像 (JPEG、PNG など) に変換したいと考えています。

P粉052686710 2023-08-23 21:18:39 0  2  615

Vue はカラー SVG ファイルを動的に塗りつぶします

VueJS3を使用してTwitterのクローンアプリを作成しています。 Twitter のロゴを .svg ファイルとして保存し、<img/> タグで使用できるようにしました。 <svg> タグに fill="#fff" 属性を指定すると、その色を変更することもできます。ただし、この .svg ファイルを複数の場所で異なる色で使用したいと考えています。そこで、 <img/> タグにクラス fill-white、bg-whit を指定して試しました

P粉125450549 2024-01-03 22:39:20 0  2  681

画像などの <use> 要素を使用して SVG アイコンのサイズを変更する方法

私の HTML ドキュメントには、icon-x などの id 属性を持つ多くの項目が含まれるドキュメントがあります。次に、これらのアイコンを <divclass=container><svg><usexlink:href=#icon-x/></svg></div> のように再利用したいと思います。ただし、この例のアイコンはソース SVG では異なるアイコンである可能性があります。サイズ。コンテナ内の SVG ではなく div.container に収まるようにしたい

P粉184747536 2023-09-15 21:09:43 0  1  973

DIV 要素を SVG ビューポート内に配置する

HTMLDIV 要素を SVG 要素に対して相対的に配置するにはどうすればよいですか? D3 を使用して SVG チャートを生成しています。右下隅の凡例の横にドロップダウンを追加したいと考えています。対応する要素 (通常の HTMLDIV 要素) はありますが、それをチャート上に正しく配置する方法がわかりません。 SVG 要素の配置は理解できますが、DIV 要素のようなものを適用する方法がわかりません。 (以下のように) ビューポートの外に配置する以外に何かアイデアはありますか?

P粉803444331 2023-09-07 17:48:48 0  1  696

グレースケール 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  373

複数のSVGファイルを同じ比率で拡大する

私には 100 近くの SVG ファイルのコレクションがあり、すべて美しく手作業でコーディングされており、それぞれの viewBox、幅、高さが慎重に指定されています。これらの SVG ファイルは、幅、高さ、アスペクト比が異なります。厄介な問題があります。私はそれらの相対的なサイズを気にしており、保存したいと考えています。 HTML ページでは、「自然な」サイズ、つまり幅と高さで指定されたサイズで表示したいと考えています。非常にシンプルです: <imgsrc="….svg">。 CSS で {object-fit:n を指定する必要があるかもしれません。

P粉244730625 2024-01-10 17:27:19 0  1  609

React と TypeScript を使用して静的ディレクトリから png および svg ファイルをロードするパス

svg ファイルと png ファイルをファビコンとして動的に使用するために、/static/ ディレクトリからパスとしてロードしようとしています。ドキュメントに従ってすべてを設定しました: ./src/model/view/<SomeView.ts>./static/<SomeFile.png|svg>./src/custom.d.ts./tsconfig.json./webpack。 config.js./package.json のサンプル ビュー B

P粉122932466 2023-08-30 20:10:18 0  1  590

CSS 放射状グラデーションから SVG 放射状グラデーションへ

CSS のように SVG で放射状のグラデーションを作成することは可能ですか http://codepen.io/A973C/pen/hnEaf (信号機のライトのことです).red{background:red;background-image :radial-gradient (茶色、透明);背景サイズ:15px15px;幅:100px;高さ:100px;border-r

P粉308783585 2023-12-11 15:54:09 0  2  680