4
票
Accepted
SVGでフォントを埋め込むことはできますか?
ほぼ同じ質問が英語でありました。2つやり方があって、CSS<style>タグでフォントファイルをbase64にしてdata URIを埋め込む方法と、<font>タグで自前のフォントをパスで指定する方法です。@rio.irikami さんがコメントで書かれた様にpathとして足す場合、2つ目のやり方にすれば最初面倒臭いですがあとからの編集は楽です。
...
- 2,399
3
票
Accepted
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"><!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
<svg 以降の中身が書いてないので推量になりますが、<!ENTITY ...> は実体宣言です。1つ目の !ENTITY は実体参照 &ns_flows; で呼び出す内容を定義していて、実体宣言なしで実体参照が使われるとエラーとなります。
- 7,245
3
票
複数の点をベジェ曲線でなめらかに結ぶための制御点座標を算出したい
絶対の正解は無いと思いますが、経験則として、こうやればだいたいうまくいく、という方法を紹介します。
ある点に注目するとき、その前後の座標からベクトルを求めます。そのベクトルを6分の1にして、対象の点の前後に加え、そこを制御点とします。
数学的な厳密さを要求せず、近似的なベジェ曲線が描ければいいという用途であれば、これでじゅうぶんかと思います。
- 1,959
2
票
Accepted
複数の点をベジェ曲線でなめらかに結ぶための制御点座標を算出したい
まずベジェ曲線の制御点は始点または終点の接線上にあります。なので微分または差分で各点の接線を求めてください。
接線が求められれば、曲線上の2点A,Bに対してAの接線とBの接線の交点Cを考えられます。近似するための制御点P,QはACおよびBCのどこかに取ればよいと考えられるので、0から1の定数r1,r2を用いてAP=r1*AC, BQ=r2*BCのように決定できます。
...
- 1.4万
2
票
Accepted
線分(1次ベジェ曲線)を説明する式で、[]が付与されている理由と縦に並んでいる理由は?
・これは座標ですか?
はい。二次元座標を表しています。
・どうして[]で囲っているのでしょうか?
・どうして縦に並べているのでしょうか? X,Yのように横に並んでいない理由は?
ベクトルには横ベクトルと縦ベクトルという2つの表し方があります。
ベクトルも行列だと思うと、(1×2)行列か(2×1)行列かの違いです。
ベクトルを横にするか縦にするかは流儀によって異なります。
...
- 2.3万
2
票
線分(1次ベジェ曲線)を説明する式で、[]が付与されている理由と縦に並んでいる理由は?
リンク先で言うP0, P1は、いわゆるベクトルです。
点(座標)Pをベクトルで表して
原点Oから点P0へのベクトル
→
OP0を略して
→ →
P0,P1
→を略して
P0,P1と言ってます。
線分
__
P0P1をP0からP1へのベクトルとすると、
→
P0P1は、
ベクトルP1-ベクトルP0
P1 - P0で、
中間の点は
(基点とするベクトルP0)+(P0からP1へのベクトル)×...
- 6,897
2
票
線分(1次ベジェ曲線)を説明する式で、[]が付与されている理由と縦に並んでいる理由は?
・これは座標ですか?
・どうして[]で囲っているのでしょうか?
単純に行列です。1x2行列ですから座標といってもいいです。
・どうして縦に並べているのでしょうか? X,Yのように横に並んでいない理由は?
結局のところ座標を表示したいだけなので、1x2行列でも2x1行列でもよいわけです。
リンク元ページ作者は1x2行列で表記しただけです。
あなたが気に入らないなら1x2でも2x1でも、...
- 2.1万
2
票
Accepted
cssのsvgに対する優先順位について
HTMLのXML namespaceがhttp://www.w3.org/1999/xhtmlなのに対し、SVGのXML namespaceはhttp://www.w3.org/2000/svgです。またCSS SelectorにおいてXML namespaceを指定するには|を使います。
@namespace url(http://www.w3.org/1999/xhtml);
@...
- 4.1万
2
票
Accepted
canvasへ描画した内容をSVGのパスデータへ変換して、パターン適用させることは出来ますか?
「canvasへ描画した内容をSVGのパスデータへ変換」に関しては、「パス」に変換されるかは不明ですが、この(古い)記事によると以下のようなライブラリがあるようです。
Method to convert HTML5 canvas to SVG?
Fabric.jsというのが、そういう機能(canvasとSVG間の相互変換)を持っているようです。
Fabric.js is a powerful ...
- 1.7万
2
票
Accepted
SVGからpng変換する際に<use>タグが反映されない
Magick.NETで変換すると、出力されました。
Magick.NET-Q16-AnyCPU
using ImageMagick;
using (var img = new MagickImage("c:/test/test.svg"))
{
img.Write("c:/test/test.png", MagickFormat.Png);
}
- 715
1
票
svgでtextタグ内の一部tspanタグを右寄せ文字にしたい
2つのテキストの区切りの地点を両方のtspanのx=とy=に設定して、数値部分に text-anchor="end"、単位部分に text-anchor="start" を付けるのはいかがでしょうか。
setInterval(() => {
document.getElementById('1').textContent = Math....
- 7,245
1
票
jsで挿入したhtmlの<polygon>要素が表示されない
イラストレーターでSVGに書き出したベジェ曲線を、HTML内で使える形式に変換したいと全く同じです。<svg>ではHTML名前空間に作られたタグに過ぎず、SVG画像であるとは認識されません。
名前空間の速修講座などを参考に修正する必要があります。jQueryを使用するのであれば、対応する記述が必要です。
- 4.1万
1
票
Python3とBeatifulSoup4を使ってhtmlからsvgを抜き取りました。svg画像としてExcelへ貼り付けるため、svgファイルとして保存する方法を教えてください。
以下は, デスクトップに temp.svg という名前で保存する場合
(デスクトップフォルダーの名前を Desktopと仮定 (名前変えてなければ大丈夫のはず))
from bs4 import BeautifulSoup
from pathlib import Path
soup = BeautifulSoup(text, 'html.parser')
svgs = soup('svg')
...
- 4,235
1
票
Accepted
SVG の線の長さと同じ値はどうやって探すんですか?
指定する値は, SVG内の pathの長さ以上であればよいので 必ずしも同じでなくても構わないはず
デバッガーにその手の情報の取得が可能か不明だったので, 以下のようにして取得
JavaScriptから SVG参照できるように用意し, 実行することで, pathの長さが判明します
(実行前に, SVG 要素に id="pls"属性追加し(ここでは適当な名前), ...
- 4,235
1
票
Accepted
CSSで、ドキュメントルートより上に配置しているSVGタグそのものを読み込む方法はありますか?
質問文の2番目の方法が実現できます。
質問文の様なhoge.phpが存在するとして、ヘッダにContent-typeを適切にセットすればphpファイルも画像扱いになります。
すなわち、
<?php
header("Content-type: image/svg+xml");
?>
<svg height="" viewBox="...
1
票
Accepted
ChromeでSMILをサポートしますか?
今は "deprecation" にするのは "suspended" (保留?/一時停止?) 状態のようですね。
以下の Issue が出ていて、
SVG SMIL Chrome deprecation is "suspended" since 2016-08-17 #4167
MDN にも注釈があります。
SVG animation with SMIL
- 1.7万
1
票
Accepted
jupyter lab上でOctaveで出力画像をsvgではなくpngにする方法はありますか?
octave_kernel のサンプル notebook によると、%plot --format png のようにして出力形式を指定できるようです。以下は小さい動作例です。
%plot --format png
plot([])
私の環境ではこれで svg / png / jpeg を切り替えることができました (Windows 10 + Jupyter 4.4.0 + ...
- 2.3万
1
票
インラインSVGでレーダーチャートを表示したい
根本的な原因は、JavaScript の関数を定義しているものの、それがいつ実行されるのかを書いていないことにあります。やりたいことに応じて、たとえば window.onload イベントを使うなどの解決法がありますので、詳しくは JavaScript のチュートリアルをご覧ください。引用元の記事では、DOM のロードが終わった後に描画させています (jQuery を使っています)。
//...
- 2.3万
1
票
Accepted
SVGの、circle中心に伸びるpathのmarker-endの調整方法
本件、色々調べ方法が見つからず、また海外版(本家)のStackOverflowで問い合わせたところ、「No way」手段は無いよ、という回答に至りました。
結果、Javascriptを介入させ、Javascriptによって制御を行う、という形を取りました。
var paths = new Array();
var autonext = -1;
var draw = function(...
- 390
1
票
IEにおいて、SVGをHTML内に直接記述した場合、他のブラウザと大きさが異なる
asamuzaK.jp : ♪Vector Vector, please. Oh, the mess I'm in (c) UFOを参照し、以下のようにwidthに応じてheightを計算し設定するjavascriptを書くことで解決しました。
(実際に使用する場合は、IEのみに適用されるよう、if (document.documentMode)などで条件をつける必要があります。)
...
- 270
1
票
1
票
Accepted
SVG 要素をJavascriptのmousemoveイベントとsetIntervalとの組み合わせ
ざっくりですが修正してみました。
http://jsfiddle.net/kamem/x2c5gvb2/2/
$(document).ready(function() {
var svg = document.getElementById("svg");
var $stg = $("#mysvg");
var mx, my, input;
//svgのサイズ
...
- 121
1
票
SVGでwindowsformアプリケーションのリストボックス等を作るには?
昔の質問ですが、同じ疑問でたどり着いた方のために回答しておきます。
foreignObjectを調べてみてください。
- 79
1
票
D3で円グラフをajaxでテキストファイルをよみこんで表示
できました。
コメントに書いた通り、データの作り方が良くなかったことと、D3への指定方法が良くなかったことが原因です。あとはこれをベースにすれば良さそうです。
データの形式が不明なので想像で付与しています。こちらも適宜変えてください。
$(function(){
a = getData(); // $.ajax()での取得を擬似的に行っている
a.splice(...
- 2,124
Only top scored, non community-wiki answers of a minimum length are eligible
関連するタグ
svg × 33html × 12
javascript × 10
css × 6
html5 × 3
html5-canvas × 3
jquery × 2
python × 1
php × 1
python3 × 1
c# × 1
jupyter-notebook × 1
firefox × 1
pdf × 1
beautifulsoup × 1
internet-explorer × 1
印刷 × 1
octave × 1