JavaScriptでSVGにtext要素を挿入する | ひまあそび-ミニゲーム


  view source
  JavaScript
  document.title = 'JavaScriptでSVGにtext要素を挿入する'

var ns = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(ns, 'svg');
var svgNS = svg.namespaceURI;

svg.setAttribute('width', 600);
svg.setAttribute('height', 600);

container = document.getElementById('demo');
container.appendChild(svg);

var x = 200;
var y = 200;
var r =4;


var path = document.createElementNS(svgNS, 'path');
path.setAttribute('d', 'M24.5,284c0,0,57.8-84.6,170.2-95.9c112.4-11.2,95.8,61.2,181.5,52.6S488.9,137.6,575.5,129');
path.setAttribute('id', 'path1');
path.setAttribute('stroke', '#000000');
path.setAttribute('fill', 'none');
path.setAttribute('y', y);
svg.appendChild(path);

var eleText = document.createElementNS(svgNS, 'text');
var ele = document.createElementNS(svgNS, 'textPath');
ele.setAttribute('x', x);
ele.setAttribute('y', y);
//ele.setAttribute('text-anchor', 'middle');
ele.setAttribute('font-size', 64);
ele.setAttribute('fill', '#ff0000');
ele.setAttribute('href', '#path1');
ele.textContent  = 'TEXT';
eleText.appendChild(ele);
svg.appendChild(eleText);


var ele3 = document.createElementNS(svgNS, 'circle');
ele3.setAttribute('cx', x);
ele3.setAttribute('cy', y);
ele3.setAttribute('r', r);
svg.appendChild(ele3);


p = document.createElement('p');
p.textContent  = 'Path上に表記はできても、左右中央揃えはできない';
container.appendChild(p);
  CSS
  
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-svg/svg-js-text/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。