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操作する方法があればと思ったのですが、私が調べた限りでは見あたりませんでした。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/15 22:14