SVG

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

RSS

  • 解決済

    回答
    1

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

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

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

    回答
    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評価
    • 40PV
    xjaPANDA xjaPANDA 1ヶ月前に ベストアンサー
  • 受付中

    回答
    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評価
    • 69PV
    zohnam zohnam 1ヶ月前に 回答
  • 受付中

    回答
    2

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

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

    • 0評価
    • 82PV
    namimon namimon 1ヶ月前に 回答
  • 解決済

    回答
    1

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

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

    • 0評価
    • 47PV
    may88seiji may88seiji 1ヶ月前に 回答
  • 受付中

    回答
    1

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

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

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

    回答
    3

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

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

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

    回答
    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評価
    • 182PV
    manzyun manzyun 4ヶ月前に ベストアンサー
  • 受付中

    回答
    1

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

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

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

    回答
    1

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

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

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

    回答
    1

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

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

    • 0評価
    • 229PV
    nano-dia nano-dia 6ヶ月前に ベストアンサー
  • 受付中

    回答
    1

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

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

    • 0評価
    • 351PV
    defghi1977 defghi1977 6ヶ月前に 回答
  • 解決済

    回答
    2

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

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

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

    回答
    1

    wordpress4.6.1 svgファイルを許可するためのfunctions.phpカスタマイズ ...

    【wordpress4.6.1 svgファイルを許可するためのfunctions.phpカスタマイズ → 効きません!】 svgファイルをwordpressで許可するため。 子テーマのfunctions.php に下記コードを貼り付けてみたのですが、 下記、4種類のコードともNGでした。 (メディアのアップロード時に、 ”このファイルタ

    • 0評価
    • 310PV
    kuck1u kuck1u 7ヶ月前に 回答
  • 解決済

    回答
    1

    jQueryで読み込んだ外部SVGをuseでも表示させたい

    jQueryで読み込んだ外部SVGをuseでも表示させたい jQueryとSVGでアバター作成ページを作ろうとしています。 外部SVGは表示できたのですが、useには表示されません。 該当のソースコード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-

    • 1評価
    • 489PV
    xxx_XXX_xxx xxx_XXX_xxx 7ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    svgファイルの画像でマスクをかける

    前提・実現したいこと 単純に長方形の画像に対してsvgファイルで作成した画像(角丸四角形)で切り抜いたようなマスクをかける作業を、全てのブラウザで適用されるようにしたいです。(※添付画像参照) 画像は任意の数多くの四角形画像に適用する必要があります。 もしsvg画像でのマスク(クリッピング?)が無理でしたら、代替案があればご提案いただければ幸いです

    • 0評価
    • 567PV
    x17kusyr x17kusyr 7ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    SVGで装飾付きのアナログ時計を作りたい(Snap.svg)

    お世話になります。 概要 ただいまSVGで「秒針が進む度に、一番外側の枠が1目盛りづつ増えるアナログ時計」を作ろうとしています。 使用しているのはSnap.svgです。 ソースコード 現状のコードは以下となります。 <!-- analog_watch.html --> <!DOCTYPE html> <html lang="j

    • 0評価
    • 664PV
    manzyun manzyun 8ヶ月前に コメント
  • 受付中

    回答
    0

    メニューバーをSVGのButtomで表したい。

    <div id="nav_buttom"> <svg width= "1500" height= "65" > <g id="menu_buttom" Class="" weght="100" hight="65"> <line x1="30" y1="31" x2="55" y2="31" stroke="black" str

    • -6評価
    • 268PV
    lars_fox lars_fox 9ヶ月前に 質問を編集
  • 受付中

    回答
    0

    gulpにてsvgスプライトを自動化したい

    前提・実現したいこと gulpにてsvgスプライトを自動化したいのですが エラーが発生しています。 発生している問題・エラーメッセージ SyntaxError: Unexpected token = at exports.runInThisContext (vm.js:53:16) at Module._compile (modu

    • 0評価
    • 314PV
    teratailが10ヶ月前に アップデート
  • 解決済

    回答
    1

    Font Awesomeのsvgファイルから1画像だけ抜き出して利用したい

    Font Awesomeを利用して、アイコンを表示しようとしています。 クライアントの都合で、<input type="button">にアイコンを出す必要があり、かつinputのvalueにはシステムのサニタイズのためか、\f061や&#xf061;は使用できないため、inputのbackgroundにsvgを表示する方法を検討しています。 F

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

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    18

  • 総質問数

    30

  • 今週の質問数

    0

関連するタグ

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