質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SVG

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

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

990閲覧

<JavaScript>Data URIになっているSVG内の属性の一部を変更して、またData URIに戻す場合の最適解

benkyo.fun

総合スコア9

SVG

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

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/04/15 14:04

DataURI化されているデータがあります。中身はSVGフォントです。

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLQpDb3B5cmlnaHQgKEMpIDIwMDkvMjAxMC8yMDExIFVscmljaCBBcGVsLgpUaGlzIHdvcmsgaXMgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIGNvbmRpdGlvbnMgb2YgdGhlIENyZWF0aXZlIENvbW1vbnMKQXR0cmlidXRpb24tU2hhcmUgQWxpa2UgMy4wIExpY2VuY2UuIFRoaXMgbWVhbnMgeW91IGFyZSBmcmVlOgoqIHRvIFNoYXJlIC0gdG8gY29weSwgZGlzdHJpYnV0ZSBhbmQgdHJhbnNtaXQgdGhlIHdvcmsKKiB0byBSZW1peCAtIHRvIG(以下略)

デコードするとこんな感じです。

[Log] <?xml version="1.0" encoding="UTF-8"?> (cordova.js, line 1540) <!-- Copyright (C) 2009/2010/2011 Ulrich Apel. This work is distributed under the conditions of the Creative Commons Attribution-Share Alike 3.0 Licence. This means you are free: * to Share - to copy, distribute and transmit the work * to Remix - to adapt the work Under the following conditions: * Attribution. You must attribute the work by stating your use of KanjiVG in your own copyright header and linking to KanjiVG's website (http://kanjivg.tagaini.net) * Share Alike. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one. See http://creativecommons.org/licenses/by-sa/3.0/ for more details. --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [ <!ATTLIST g xmlns:kvg CDATA #FIXED "http://kanjivg.tagaini.net" kvg:element CDATA #IMPLIED kvg:variant CDATA #IMPLIED kvg:partial CDATA #IMPLIED kvg:original CDATA #IMPLIED kvg:part CDATA #IMPLIED kvg:number CDATA #IMPLIED kvg:tradForm CDATA #IMPLIED kvg:radicalForm CDATA #IMPLIED kvg:position CDATA #IMPLIED kvg:radical CDATA #IMPLIED kvg:phon CDATA #IMPLIED > <!ATTLIST path xmlns:kvg CDATA #FIXED "http://kanjivg.tagaini.net" kvg:type CDATA #IMPLIED > ]> <svg xmlns="http://www.w3.org/2000/svg" width="109" height="109" viewBox="0 0 109 109"> <g id="kvg:StrokePaths_0304d" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;"> <g id="kvg:0304d"> <path id="kvg:0304d-s1" d="M30.5,30.25c1.88,0.75,4.64,1.06,5.88,0.88c6.75-1,22.25-4.5,26.5-6c2.17-0.76,3.5-1.25,4.88-2.12"/> <path id="kvg:0304d-s2" d="M36.25,48.7c2.01,0.85,4.97,1.2,6.29,0.99c7.23-1.13,23.82-5.09,28.37-6.79c2.32-0.86,3.75-1.41,5.22-2.4"/> <path id="kvg:0304d-s3" d="M42,14.12c1.5,0.88,3.13,2.94,4,5.12c5.5,13.76,16,29.26,26.37,40.76c7.64,8.47,9.12,9.38-6,3.88"/> <path id="kvg:0304d-s4" d="M33.75,83.25c10.62,9.75,27.25,8.62,38.12,5"/> </g> </g> <g id="kvg:StrokeNumbers_0304d" style="font-size:8;fill:#808080"> <text transform="matrix(1 0 0 1 24.5 29.5)">1</text> <text transform="matrix(1 0 0 1 28.13 48.13)">2</text> <text transform="matrix(1 0 0 1 32.5 13)">3</text> <text transform="matrix(1 0 0 1 24.5 77)">4</text> </g> </svg>

この中でstyle属性が"fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;"になっているgタグのそのstyle属性の中身を変更して、またもとののDataURIに戻したいです。
この場合、パフォーマンスを優先するとして、どのような手順やコードで実現するのが望ましいでしょうか。
環境はionicなので、ios/androidのネイティブブラウザです。
ちなみにやりたいことはimgタグに食わせているData URIによるSVGイメージの色(#000000)の変更です。img要素になった後のsrcは内部的にはsvgにデコードされているはずなので、それをDOM操作する方法があればと思ったのですが、私が調べた限りでは見あたりませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

開発者コンソールで見る限りimgタグで読み込ませたものはDOMに変換されないようです。なので自前でbase64デコードをしてSVGを作成してDOM操作をすることになりそうです。その際document.createElementNS関数が使えます。
Document.createElementNS() - Web API | MDN
これでDOMを作り、操作しinnerHTMLで取得しbase64でエンコードする、というのが正道かと思います。

投稿2020/04/15 14:23

A_kirisaki

総合スコア2853

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

benkyo.fun

2020/04/15 22:14

ありがとうございます。やっぱりゴリゴリやるしかないですかね。SVGはベクタデータなので、ブラウザ側でレンダリングするためには、何らかのデコードと解釈がセットになっているのだろうと思いまして。まあたぶんライブラリのなかで終結してますよね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問