SVG

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

RSS

  • 解決済

    回答
    1

    SVGアニメーションのIEバグ

    https://jsfiddle.net/ndm_/kx26mhjh/ SVGの円のアニメーションを色々試しているのですが、 chrome、ff、safariでは動くのですが、 IE全般で上手く動きません… 検証ツールで見てみると、アニメーションの処理自体は行われており、 CSSで設定しているstroke-widthなどのsvg属性が反映されていない

    • 0評価
    • 54PV
    _ndm _ndm 3日前に ベストアンサー
  • 解決済

    回答
    1

    GraphicsJSの画像が切れる

    このQuick Startのコードをコピー&ペーストしてブラウザから開くと、なぜか上三分の一だけ表示されます。 https://docs.anychart.com/Graphics/Quick_Start 正常ならば、リンク先の画像が表示されるはずですが、その上部三分の一だけが表示されます。 コードは下記です。 <!doctype html> <

    • 0評価
    • 31PV
    defghi1977 defghi1977 1週間前に ベストアンサー
  • 解決済

    回答
    2

    背景を斜めにかっこよくする

    お世話になっております。 CSSとSVGなどを駆使して以下のサイトのように背景を斜めにしました。 http://www.webopixel.net/html-css/1032.html ここで、その背景の中に斜め線を入れたいと思っております。 方法として以下を試してみましたが、失敗しました。 サイト全体に斜め線のoverlayをかける → コンテ

    • 0評価
    • 105PV
    kenkbou kenkbou 2週間前に ベストアンサー
  • 解決済

    回答
    1

    vivus.jsのError:

    svgアニメーションを操作するvivus.jsを使ってjsファイルに書き込んだんですが、開発ツールにて Error: "element" parameter is not related to an existing ID と出て来ました。存在してるIDと紐づけられないってこと?ですかね? しかしちゃんと動いてはいます。 なぜこのエラーが出てくるの

    • 0評価
    • 278PV
    sleeeep12 sleeeep12 1ヶ月前に コメント
  • 解決済

    回答
    3

    SVGの使い方が良くわからない

    SVGで再利用可能なアイコンのコンポーネントを作ろうとしているのですが、そもそものsvgの使い方がよく理解できず、つまずきました。 いろんなパターンでコードを書いてみて、動作確認の方を行ってみたのが以下掲載コードとなります。 やりたいこと とりあえずイラレ等から出力されたsvgのコード(以下に掲載されているようなFBロゴのコードみたいなもの)を用い

    • 0評価
    • 101PV
    hytm 退会済みユーザー 1ヶ月前に コメント
  • 解決済

    回答
    2

    SVG画像の表示について

    svgの画像を表示させたいのですが、IE/Firefoxでは問題なく表示されるのですが、chromeでは表示されたり、表示されてもずれていたりします。今回svgの画像は初めて使ってみているので使い方が悪いのかもしれないと思い質問させていただきました。 <現状の表示> <div class="left-box"> <object data="./

    • 0評価
    • 78PV
    Yucchi Yucchi 1ヶ月前に 回答
  • 解決済

    回答
    1

    二つの同じSVGをHTMLへ埋め込み動かしたいです。

    SVG画像初心者です。 ネットのサンブルを参考に、Snap.svgを使いモーフィングアニメーションを作りました。 サンプルは1個のアニメーションですが、同時に2個のアニメーションを動かしたいのです。 同じものをコピペ後、idを変更してもうまくいきません。 <svg id="circle" version="1.1" xmlns="http://w

    • 0評価
    • 74PV
    laki laki 2ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    SVGアニメーションで滑らかに描画されずコマ送りのようになる。

    SVGアニメーションを滑らかに表示する http://www.tam-tam.co.jp/tipsnote_sample/uenaka/151207/index2.html こちらのsvgアニメーションのように滑らかに処理をしたいです。 コードの内容はほぼそのままでvaluesの値のみイラレから書き出した実装したい形に書き換えたのですがコマ送りのような

    • 0評価
    • 456PV
    defghi1977 defghi1977 2ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    スプライト化したSVGへのスタイルがChromeだけ効かない

    お世話になります。あるSVGをスプライト化させて読み込みcss等でデザインを行なったところ、fireofxは正常に表示されたのですがgooglechrome、safariは全くスタイルが当たっていない状態で表示されました。 何故なのでしょうか。また解決策も合わせてご教授して頂けると幸いです。 以下ファイルになります。宜しくお願い致します。 <!DOCTY

    • 1評価
    • 611PV
    defghi1977 defghi1977 3ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    [Canvas] 図形の中に文字をいれる

    Canvasで4つの四角形をつくりましたが、これに、それぞれ四角形いっぱいに、文字を入れたいのですが、いれることは可能でしょうか? <svg xmlns="http://www.w3.org/2000/svg" width="250" height="50"> <rect x="0" y="0" width="48" height="48" rx="5

    • 0評価
    • 100PV
    xjaPANDA xjaPANDA 4ヶ月前に ベストアンサー
  • 受付中

    回答
    1

    【PHP,imagick,SVG to PDF】PHPのimagickでSVGをPDFに変換する際に...

    いつもお世話になっております タイトルの環境でSVGをPDF変換する際、SVG単体では効いていたstyleがPDFに変換すると効かなくなってしまいます 詳しくはSVGタグに当てたstyleのみ効かない状況です <svg version="1.1" id="main_svg" xmlns="http://www.w3.org/2000/svg" wid

    • 0評価
    • 148PV
    zohnam zohnam 4ヶ月前に 回答
  • 受付中

    回答
    2

    Chart.js、ドーナツグラフのデータのカウントアップ(ダウン)アニメーション表示

    実現したいこと ドーナツグラフ 円グラフに対する線形グラデーション ドーナツグラフの真ん中に数値を表示する 真ん中の数値をカウントアップ(ダウン)アニメーションをつける Chart.jsを使っています。 あるデータを取ってきて、その割合をアニメーションでドーナツグラフの真ん中に表示させたいです。現段階ではランダムな値でデータ更新をしていま

    • 0評価
    • 246PV
    namimon namimon 4ヶ月前に 回答
  • 解決済

    回答
    1

    svg スクロール時のイベントの取得方法

    前提 スクロール → 表示 → svg アニメーション(四角から円へのモーフィング)実装を試みています。 モーフィングのアニメーション自体は下記コードで実現できました。 ただスクロールして表示された段階ですでにモーフィングのアニメーションが実行されてしまっています。 (ロード時にすでに実行されている) svgは定義してuseタグで使用 実現したいこと

    • 0評価
    • 123PV
    may88seiji may88seiji 4ヶ月前に 回答
  • 受付中

    回答
    1

    pdf2svg: PDFをSVGに変換するとPDF上の画像が一部黒くなったり、ページが丸ごと描画され...

    前提・実現したいこと PDFを一ページずつSVGに変換したい pdf2svg以外にも、変わらない変換速度で良い変換方法(パッケージ)があれば知りたい ※ 但し、セキュリティと費用の観点から、外部サーバーにファイルを投げるような「ファイル変換サービス」は使用できない 以降の調査方法を知りたい ※ 依存しているであろうパッケージのバージョン比

    • 0評価
    • 240PV
    CyberMergina CyberMergina 7ヶ月前に コメント
  • 受付中

    回答
    3

    ブラウザにSVG要素で描画しPNG画像に変換するプログラムを組みたいのですが、SVGをPNG画像に変...

    ブラウザにSVG要素で描画したものを、PNG画像に変換したいです。 環境はMac、エックスサーバーです。 SVG要素で描画はできたのですが、PNGに変換するのが、どうやればできるのかわかりません。 PHPのimagickというのをインストールしたのですが、Xサーバーで使うにはどうすれば良いのでしょうか? プログラムでSVG要素の描画をPNGに変換でき

    • 0評価
    • 402PV
    kei344 kei344 7ヶ月前に コメント
  • 解決済

    回答
    1

    svg要素に対してsvgでマスクしてループアニメーションしたい

    マスクされる要素 <svg width="399" height="77" viewBox="-855 -699 399 77" xmlns="http://www.w3.org/2000/svg"> <path d="M-854.84-696.8h25.376l15.6 25.584 15.6-25.584h25.376v72

    • 0評価
    • 250PV
    manzyun manzyun 7ヶ月前に ベストアンサー
  • 受付中

    回答
    1

    SVGで、フォントの特徴を残したまま書き文字アニメーションをさせたい

    前提・実現したいこと https://draft.co.jp/ こちらのサイトで実装されている 書き文字アニメーションについての質問です。 参考サイトのトップに出てくる(ALL HAPPY BY DESIGN)の文字のように、 フォントの持っている線の強弱やインクのハネのような意匠をのこしたまま 書き文字アニメーションさせる方法が分からず困っ

    • 0評価
    • 605PV
    daima4657 daima4657 8ヶ月前に コメント
  • 解決済

    回答
    1

    リンク付きSVG画像をiosで正しく表示させたい。

    前提・実現したいこと 下記のリンク付きsvg画像ですが、iosでリンクがなくなります。 PCではリンクが正しく付きます。 これの対応策をご教授いただければ幸いです。 <a href="#"><img src="img/pcasset/001logo.svg"></a>

    • 0評価
    • 192PV
    Akihiro_Nagai 退会済みユーザー 8ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    ノード同士で結ばれている辺の太さを変更したい

    前提・実現したいこと jsonファイルを読み出しD3.jsを使ってグラフを書いています。 { "nodes":[ {"name":"0"}, {"name":"1"} ], "links":[ {"source":0, "target":1} ] } このJSONファイルを読み出したとき,下の図のように0から1に向かうようにしています。 こ

    • 0評価
    • 297PV
    nano-dia nano-dia 9ヶ月前に ベストアンサー
  • 解決済

    回答
    2

    SVGを画像として書き出した際のfont-familyが反映されない

    SVGで外部フォント(google fonts)をtext要素に使用した際、 表示は問題なくされるのですが、そのSVGを画像としてダウンロードしてもfont-familyの設定がデフォルトになってしまいます。 設定したfont-familyそのままの表示で画像にするのは不可能なのでしょうか? 方法があればご教授いただければとおもいます。 ht

    • 0評価
    • 320PV
    nao5151 nao5151 10ヶ月前に ベストアンサー
1

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    19

  • 総質問数

    37

  • 今週の質問数

    1

関連するタグ

SVGタグのよく見られている質問

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る