[svg] タグが付いた質問
34
件の質問
6
票
2
回答
7,065
閲覧数
複数の点をベジェ曲線でなめらかに結ぶための制御点座標を算出したい
プログラム経由でベクター画像(SVGファイル)を生成しようとしています。
書き出す図形はやや歪んだ円形で、関数に任意の角度を渡すと中心からの距離が得られます。
現状は角度を1度ずつ変化させて点を直線で結んでいるのですが少しガタガタしてしまうのが気になります。
そこでベジェ曲線でうまく繋いで点の数を減らそうと思っています。...
6
票
1
回答
1,208
閲覧数
IEにおいて、SVGをHTML内に直接記述した場合、他のブラウザと大きさが異なる
IE11において、以下のようにHTML内に直接記述したSVGのスケーリングが、他のブラウザと異なります。
#svg {
width: 80%;
background-color: #DDD;
}
<svg viewBox="0 0 430 330" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=...
4
票
2
回答
560
閲覧数
SVGの、circle中心に伸びるpathのmarker-endの調整方法
半径が点の範疇以上に指定されている円があり、Pathをその縁の中心を目的地にしています。
例えば、次のようなSVGを描きました。
<svg width="600px" height="400px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- ////////////////////////////...
3
票
1
回答
1,569
閲覧数
SVG 要素をJavascriptのmousemoveイベントとsetIntervalとの組み合わせ
Javascriptとsvgの勉強として以下のコードを作成してみました。
1週間程かけてsvgの仕組み,JavascriptのaddEventListener,jQueryのイベント関連関数など色々試してみましたが一番スムーズに動いたソースを張り付けておきます。
以下のリンクで確認できます。
エラーは出ませんがマウスを動かさないと中央部分がランダムに動かない
$(document)....
3
票
1
回答
181
閲覧数
SVGでwindowsformアプリケーションのリストボックス等を作るには?
現在作っているWebサイトで大きなsvg画像を表示するページがあります。
(htmlにインラインsvgを埋め込んでいます。)
そのページのsvgタグ内に、windowsformアプリケーションのオブジェクト(例:リストボックス、コンボボックス等)を作成することは可能でしょうか?
svgでオブジェクトを作ることが難しい場合は、svgタグ内にオブジェクトを追加する方法でもかまいません。
...
3
票
2
回答
1,227
閲覧数
SVGのPATH要素を、JavaScriptでPOST送信すると、受信内容が[object SVGPathElement]となる
やりたいこと
SVGのPATH要素を、JavaScriptでPOST送信
PHPでPOST受信して利用
送信したいPATH要素
<path d=" … 中略 … "></path>
現状
■JavaScript での送信内容
フォーム動的生成
input 要素に、path 要素を格納した target を追加
elem.setAttribute('value', ...
2
票
4
回答
9,662
閲覧数
IE10, 11でblur効果
IE10、11でもblur効果、またはそれに近い効果を適用することは可能でしょうか?
できれば、png画像は使いたくありません。
css filterやsvg、Javascript等で実装できる方法をご存知の方
ご教授ください。
1
票
1
回答
7,806
閲覧数
SVGでフォントを埋め込むことはできますか?
SVGにフォントを埋め込むことはできますか?
SVGにフォントを埋め込んで、そのSVGを<body>のbackground-imageにしたいです
このようなことはできるのでしょうか?
1
票
2
回答
385
閲覧数
SVGからpng変換する際に<use>タグが反映されない
SVGからPNGに変換する際にuseタグを使用している下図赤い四角が反映されません。
C#
using SVG;
public void SVGtoPNG(string svgFilePath)
{
var svgDocument = SvgDocument.Open(svgFilePath);
var bitmap = svgDocument.Draw();
...
1
票
1
回答
176
閲覧数
CSSで、ドキュメントルートより上に配置しているSVGタグそのものを読み込む方法はありますか?
現状
ドキュメントルートより上に、(実質的にはsvgである)hoge.phpを配置しています。
出力したい箇所(html)で、hoge.phpを読み込み、svgを表示しています。
hoge.php
<svg height="" viewBox="" width="" xmlns="http://www.w3.org/...
1
票
1
回答
222
閲覧数
jupyter lab上でOctaveで出力画像をsvgではなくpngにする方法はありますか?
jupyter lab上でOctaveでグラフを描画すると自分の環境ではsvg画像が出力されてしまうのですが、これをpngやjpg等が出力されるようにする方法はありますか?
サンプル数が10^6のオーダーなのでベクター画像であるsvgで描画してしまうと非常に重くて困ってます。
使用言語はOctaveで、カーネルもIOctaveです
OSはMacOSです
ライブラリはデフォルトから追加してません
...
1
票
1
回答
131
閲覧数
forceレイアウトのノードのリンクに飛ぶことができない
<!DOCTYPE html>
<html lang="ja">
<style>
svg{
border:solid 1px;
}
</style>
<head>
<meta charset="utf-8">
<title>D3.js(Force Layout)の練習</...
1
票
1
回答
468
閲覧数
D3で円グラフをajaxでテキストファイルをよみこんで表示
テキストに$data=$_POST["item"].",".$_POST["tanka"].",".$_POST["zaiko"]."¥n";と保存できるようにしました。
この在庫の円グラフを作る際に2点わかりません。
1.円グラフのパラメーターにテキストファイルの目的のデータをどうおとすか。
2.円グラフの中心がうまく設定できません。
<!DOCTYPE html>
<...
1
票
1
回答
129
閲覧数
マテリアルアイコンはSVGで作成する際には何×何pixelが妥当ですか?
WEBアプリに使用するマテリアルアイコンを作成したいのですが、以下リンク先のアイコンのSVGをみるとHTML用のインラインSVGが24×24pixelで作成されています。
Material Design Icons
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
...
1
票
0
回答
440
閲覧数
SVGで、大きさが分からない(?)「pathタグの集まり」を、指定要素一杯に表示させるには?
下記SVGタグ(抜粋)があるのですが、これを指定要素(高さ400px、横幅250px)一杯に表示させるためには、どうすれば良いでしょうか?
・viewBoxを指定するためには、pathタグ全体の大きさを知る必要がある?
・それはどこから判断???
<svg viewBox="0 0 ? ?">
<path d="M 500a 10,20 … " transform="...
0
票
3
回答
339
閲覧数
線分(1次ベジェ曲線)を説明する式で、[]が付与されている理由と縦に並んでいる理由は?
Link先で、下記式が掲載されているのですが、意味が分かりません。
Q
・これは座標ですか?
・どうして[]で囲っているのでしょうか?
・どうして縦に並べているのでしょうか? X,Yのように横に並んでいない理由は?
・これが、バーンスタイン基底関数ですか?
・それとも、二項係数??
0
票
1
回答
594
閲覧数
<div width="100%"></div>内で、できるだけ大きくSVG表示したい時のviewBox属性の設定は?
やりたいこと
<div width="100%"></div>内で、(画面の大きさに合わせて)できるだけ大きくSVG表示したい。
width="100%"内なので、SVGに大きさの固定数値を指定したくない。
縦横比は可変してもよい。
追記
下記のような感じですか?
svgタグ自体には width や height や ...
0
票
2
回答
422
閲覧数
jsで挿入したhtmlの<polygon>要素が表示されない
htmlにあらかじめ書かれている、要素は表示されるのに、
jsで追加した要素は表示されません。
ブラウザのデベロッパーツール上では同じような表記になっているようなのですが。
[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title&...
0
票
1
回答
192
閲覧数
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"><!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
HTMLへSVGファイルを読み込んでいるのですが、
・下記だと表示されて、
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"&...
0
票
1
回答
460
閲覧数
svgでtextタグ内の一部tspanタグを右寄せ文字にしたい
svgで「温度」を表示するようなテキストボックスを配置したいのですが、以下の条件にあるテキストボックスを書くことができず困っております。
単位部分が右側に固定
数値は単位の左側から右寄せで表示(text-align:rightのような)
どのように記載すればよいかご教授いただきたいです。
<svg id="111" x="000" y="...
0
票
1
回答
1,502
閲覧数
canvasへ描画した内容をSVGのパスデータへ変換して、パターン適用させることは出来ますか?
canvasへ描画した内容をSVGのパスデータへ変換して、SVGのパターンを適用させてみたいのですが、そもそも、canvasへ描画した内容をSVGのパスデータへ変換することは出来ますか?
検索してみたら下記ページが見つかったのですが、ここで記載されている内容は、canvasへ描画した内容をSVGへ取り込んでいるだけでSVGのパスデータへ変換しているわけではないのですか?
...
0
票
1
回答
302
閲覧数
cssのsvgに対する優先順位について
次のリンクからhtml5版プレイヤーに移動した後の、設定ボタンの色を変えようとしています。
http://www.nicovideo.jp/watch/sm8628149
cssで言うとここです
→<button class="ActionButton ControllerButton PlayerOptionButton"~~>
そこで、stylishにて
....
0
票
1
回答
135
閲覧数
HTMLに組み込まれていたSVGタグを画像へ変換したいのですが、正常変換されません。HTMLに組み込まれていたSVGタグは普通のSVGとは異なる?
最終的にやりたいこと
HTMLに組み込まれていた下記SVGタグを画像変換したい
<svg id="sidebar" viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://...
0
票
2
回答
588
閲覧数
Python3とBeatifulSoup4を使ってhtmlからsvgを抜き取りました。svg画像としてExcelへ貼り付けるため、svgファイルとして保存する方法を教えてください。
soup = BeautifulSoup(html, "html.parser")
svgs = soup.findAll('svg')
svgs[1] # <----- .svgとしてsaveしたい
0
票
1
回答
265
閲覧数
SVG の線の長さと同じ値はどうやって探すんですか?
CSS animation で遊び倒す -SVG Line - - Qiitaを読んでいます。
破線の間隔が、SVG の線の長さと同じ値を探し、stroke-dasharrayに設定して、全てを隠します。
「SVG の線の長さと同じ値を探し」とはどのように探すのでしょうか?
コードの該当箇所の引用:
stroke-dasharray: 700px;
stroke-dashoffset: ...
0
票
1
回答
183
閲覧数
ChromeでSMILをサポートしますか?
Chome45でSMILを非推奨したと知っています。
しかし,最新Chomeでうまく動作し,Consoleでも警告がなくなったようです。
Caniuse(https://caniuse.com/#feat=svg-smil) にも支援していることで表示します。
SVGのSMIL志願するんですか?
0
票
1
回答
325
閲覧数
インラインSVGでレーダーチャートを表示したい
以下のコードをhtmlファイルに入れていますがレーダーチャートが表示されません。原因がわかる方教えていただけませんでしょうか。
コードの出典: ”インラインSVG”を使ってレーダーチャートを作ってみよう! -- キャスレー技術ブログ
<head>
<style>
#svg_container{
width:600px;
height:450px;
...
0
票
0
回答
668
閲覧数
PDF.jsで暗号化PDFを描画したい
前提
Webアプリケーションを構築しています。
JavaScriptを使用し、ブラウザでPDFを表示する機能が必要になったため
JavaScriptでPDFを表示可能なPDF.jsを使用し、技術調査を行っています。
PDF.jsでは以下の2通りの描画形式があることを認識しております。
PDF.jsに搭載されているビューワ(viewer.html)を利用しiframeにて描画
pdfjs ...
0
票
0
回答
395
閲覧数
アップロードした SVG 画像が表示されない
コーディングの学習をしているものです。
自分のパソコンでローカルにhtmlをgoogleのブラウザで見る時には、背景画像としてSVG画像が表示されてうまくいっています。
ところが、初めてFileZillaを使って自分で作ったものをアップして確認してみるとSVG画像が表示されてません。
原因がわからなかったのですが、この画像をPNGに変換して、再びアップしてみてみるとブラウザで確認できました。
...
0
票
1
回答
685
閲覧数
javascriptのオブジェクトにsvgを文字列で格納してhtmlに追加する方法
htmlに外部ファイルからsvgを読み込みたくて、jsファイルのオブジェクトに文字列としてsvgを格納してhtmlに追加する方法を考えたのですが、上手く動作しません。body直下にsvgを置いているので上部に空白出来るはずなのですが、出来ないです。
見ていただけないでしょうか?
index.html
<!DOCTYPE html>
<html lang="ja"...
0
票
0
回答
216
閲覧数
フリーハンド描画実装に関する canvas と svg の違いは?
フリーハンド描画実装に関して、 canvas と svg の違いはありますか?
それぞれ長所と短所があれば知りたいです。
質問経緯
Webブラウザで動作するフリーハンド描画ツールを作成しようと思い、色々調べています。
当初はcanvasでしか作成できないと思っていたのですが、 svg で作成している人もいることに気が付きました。
両者を比較した上で何れかを選択したいのですが、...
0
票
1
回答
93
閲覧数
box-shadowのblur-radiusからSVGのstdDeviationへの変換
box-shadow: 0 0 20px #000;
たとえば、CSSで作った影をと同じものをSVGで作るとき、
<svg width="100px" height="100px">
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="...
-1
票
2
回答
286
閲覧数
WebでSVGを取り扱う際、SVGタグデータをデータベースへ保存した方がよいか、あるいはSVGファイルとして保存した方がよいか
WebでSVGを取り扱う際、下記いずれが適切ですか?
・SVGタグデータ毎MySQLへ保存
・SVGファイルとして保存
それぞれメリットデメリットを知りたい。
SVGファイルのサイズ例
968KB
環境
PHP 7.2
MySQL5.7
-2
票
1
回答
610
閲覧数
イラストレーターでSVGに書き出したベジェ曲線を、HTML内で使える形式に変換したい
お世話になります。
HTMLの<svg>要素の中の<path>と、イラレで書き出したSVGファイルに含まれる<path>では、ベジェ曲線の書き方が若干違うようで、それを書き換える必要があるようです。
イラストレーターで描き、SVGに書き出したベジェ曲線を、HTML中のSVGで使えるpath要素に簡単に変換できるツールなどありませんか?
または、...