5
ほぼ同じ質問が英語でありました。2つやり方があって、CSS<style>タグでフォントファイルをbase64にしてdata URIを埋め込む方法と、<font>タグで自前のフォントをパスで指定する方法です。@rio.irikami さんがコメントで書かれた様にpathとして足す場合、2つ目のやり方にすれば最初面倒臭いですがあとからの編集は楽です。
直接質問とは関係ありませんが、フォントを埋め込む場合データの再配布という扱いになる可能性があるのでライセンスには気をつけた方がいいと思います。
1. <style>を使う方法
SVGにCSSスタイルを足すには、
<svg ...>
<defs>
<style type="text/...
3
<svg 以降の中身が書いてないので推量になりますが、<!ENTITY ...> は実体宣言です。1つ目の !ENTITY は実体参照 &ns_flows; で呼び出す内容を定義していて、実体宣言なしで実体参照が使われるとエラーとなります。
3
絶対の正解は無いと思いますが、経験則として、こうやればだいたいうまくいく、という方法を紹介します。
ある点に注目するとき、その前後の座標からベクトルを求めます。そのベクトルを6分の1にして、対象の点の前後に加え、そこを制御点とします。
数学的な厳密さを要求せず、近似的なベジェ曲線が描ければいいという用途であれば、これでじゅうぶんかと思います。
2
まずベジェ曲線の制御点は始点または終点の接線上にあります。なので微分または差分で各点の接線を求めてください。
接線が求められれば、曲線上の2点A,Bに対してAの接線とBの接線の交点Cを考えられます。近似するための制御点P,QはACおよびBCのどこかに取ればよいと考えられるので、0から1の定数r1,r2を用いてAP=r1*AC, BQ=r2*BCのように決定できます。
具体的なrの値は条件をベジェ曲線の式に当てはめて方程式を解くか、適当に決めてしまってください。なお90度の円弧では0.55程度になります。
2
IE10,11が対象ということで、SVGフィルターを使い、背景画像をぼかすサンプルを作成しました。
http://jsfiddle.net/7dbg3vq8/14/
※IE10, IE11でしか確認していません。
まず、SVGフィルタを適用した画像を用意します。
以下の場合は、SVG内で、 http://dummyimage.com/200x200/000/fff を指定しています。
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" ...
2
・これは座標ですか?
はい。二次元座標を表しています。
・どうして[]で囲っているのでしょうか?
・どうして縦に並べているのでしょうか? X,Yのように横に並んでいない理由は?
ベクトルには横ベクトルと縦ベクトルという2つの表し方があります。
ベクトルも行列だと思うと、(1×2)行列か(2×1)行列かの違いです。
ベクトルを横にするか縦にするかは流儀によって異なります。
慣習的に縦か横を決めたり、スペースの都合に合わせて決めたりします。
日本の高校数学だと横ベクトルが多いかもしれませんが、大学数学だと縦のことも多いです。
カッコが [ ] になっているのは、ベクトルのカッコをそう書いているだけでしょう。 (丸括弧でなくても良いというだけです。)
・これが、バーンスタイン基底関数ですか?
・...
2
リンク先で言うP0, P1は、いわゆるベクトルです。
点(座標)Pをベクトルで表して
原点Oから点P0へのベクトル
→
OP0を略して
→ →
P0,P1
→を略して
P0,P1と言ってます。
線分
__
P0P1をP0からP1へのベクトルとすると、
→
P0P1は、
ベクトルP1-ベクトルP0
P1 - P0で、
中間の点は
(基点とするベクトルP0)+(P0からP1へのベクトル)×比率(リンク先ではt)
まとめると
P0+(P1 - P0)t
P0(1-t)+(P1)t
(1-t)P0+tP1となります。
ベクトルP0をいわゆるデカルト座標系(x-y座標)であらわすと、
P0=(P0x, P0y)
P1=(P1x, P1y)
となって、
(1-t)P0+tP1をこちらで書き直すと
((1-t)...
2
・これは座標ですか?
・どうして[]で囲っているのでしょうか?
単純に行列です。1x2行列ですから座標といってもいいです。
・どうして縦に並べているのでしょうか? X,Yのように横に並んでいない理由は?
結局のところ座標を表示したいだけなので、1x2行列でも2x1行列でもよいわけです。
リンク元ページ作者は1x2行列で表記しただけです。
あなたが気に入らないなら1x2でも2x1でも、お好きなほうでどうぞ。
2
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);
@namespace nssvg url(http://www.w3.org/2000/svg);
@-moz-document domain("www.nicovideo.jp") {
.ActionButton nssvg|svg {
fill: #f90 !important;
}
}
2
jQueryオブジェクトを生成するAPIのひとつであるjQuery(html [, ...] )は、テキストをraw HTMLとして扱う仕様です。
jQuery( html [, ...] ) Returns: jQuery
Description: Creates DOM elements on the fly from the provided string of raw HTML.
html
Type: htmlString
A string of HTML to create on the fly. Note that this parses HTML, not XML.
具体的には、次のような結果を生じます。
const jqEl = $('&...
1
今は "deprecation" にするのは "suspended" (保留?/一時停止?) 状態のようですね。
以下の Issue が出ていて、
SVG SMIL Chrome deprecation is "suspended" since 2016-08-17 #4167
MDN にも注釈があります。
SVG animation with SMIL
1
octave_kernel のサンプル notebook によると、%plot --format png のようにして出力形式を指定できるようです。以下は小さい動作例です。
%plot --format png
plot([])
私の環境ではこれで svg / png / jpeg を切り替えることができました (Windows 10 + Jupyter 4.4.0 + octave_kernel 0.28.4 + Octave 4.4.1)。
1
イラストレーターでSVGに書き出したベジェ曲線を、HTML内で使える形式に変換したいと全く同じです。<svg>ではHTML名前空間に作られたタグに過ぎず、SVG画像であるとは認識されません。
名前空間の速修講座などを参考に修正する必要があります。jQueryを使用するのであれば、対応する記述が必要です。
1
本件、色々調べ方法が見つからず、また海外版(本家)のStackOverflowで問い合わせたところ、「No way」手段は無いよ、という回答に至りました。
結果、Javascriptを介入させ、Javascriptによって制御を行う、という形を取りました。
var paths = new Array();
var autonext = -1;
var draw = function(type, opts) {
var svg = document.createElementNS("http://www.w3.org/2000/svg", type);
for (var k in opts) {
svg.setAttribute(k, opts[k]);
}
...
1
asamuzaK.jp : ♪Vector Vector, please. Oh, the mess I'm in (c) UFOを参照し、以下のようにwidthに応じてheightを計算し設定するjavascriptを書くことで解決しました。
(実際に使用する場合は、IEのみに適用されるよう、if (document.documentMode)などで条件をつける必要があります。)
function resize_svg_width(elem) {
function getAspect(o) {
var y = o.split(' ');
return y[3] / y[2];
}
z = document.defaultView....
1
.attr("xlink:href",function(d){return d.url;})
でどうでしょうか。
1
EaselJS(http://www.createjs.com/#!/EaselJS) のように Canvas に Filter 効果をつけることができるライブラリを使う方法はどうでしょうか。
http://www.createjs.com/Demos/EaselJS/Filters_input.html
1
以下 http://unformedbuilding.com/articles/frosted-glass-effect-with-css-and-svg/ より引用。
2011年の9月に CSS と SVG filter でガラスっぽい効果をつける というのを書きましたが、これは Firefox のみを対象としたものでした。
そこで今回はできるだけ多くのブラウザに対応したものを作ってみます。
この辺が参考になるのではないでしょうか。IE10, 11 は CSS filter に対応していない らしいのですが、SVG filterを使う方法がありそうです。
1
ざっくりですが修正してみました。
http://jsfiddle.net/kamem/x2c5gvb2/2/
やったこと
setIntervalで毎回実行する必要が無い記述はわける。
毎回実行する必要があるのは下記項目なので、それ以外の記述はそとに移しました。
randomの数字を撮り直す
情報の取得・描画
svgのパスを生成し直す
パスを作る処理を関数化
マウスを移動した時の処理と
setIntervalの場合にパスを生成する処理を
共通しそれぞれで実行するように修正しました。(createPath)
あとは見ていただければなんとくわかるのではないかと思います。
Pathの生成部分などいまベタで描いてしまっているのですが
for文で描いたほうが応用が効きそうかなとは思いました。
1
昔の質問ですが、同じ疑問でたどり着いた方のために回答しておきます。
foreignObjectを調べてみてください。
1
できました。
コメントに書いた通り、データの作り方が良くなかったことと、D3への指定方法が良くなかったことが原因です。あとはこれをベースにすれば良さそうです。
データの形式が不明なので想像で付与しています。こちらも適宜変えてください。
$(function(){
a = getData(); // $.ajax()での取得を擬似的に行っている
a.splice(0, 1); // 先頭データ(ヘッダ)を削除
var item = Array();
var list = Array();
$.each(a,function(key,value){
b=value.split(",");
item.push(...
上位に投票された、最小文字数のコミュニティ wiki 以外の回答のみが対象となります
関連するタグ
svg × 21html × 8
javascript × 7
css × 4
jquery × 2
html5 × 2
xml × 1
jupyter-notebook × 1
internet-explorer × 1
octave × 1