简体   繁体   中英

AndroidSVG: How to dynamically change Inkscape svg color

AndroidSVG allows for dynamic color change as explained here .

The following code works for 95% of my icon library ...

SVGImageView svgIV;
...... 
String color = "#FEFBDE"
svgIV.setCSS(String.format("* { fill:%s; }", color););

... but fails on Inkscape SVGs such as this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="64"
   height="64"
   id="svg2"
   style="display:inline">
  <defs
     id="defs4" />
  <g
     transform="translate(403.45398,-1106.6063)"
     id="layer1"
     style="display:inline">
    <g
       transform="matrix(7.6594323,0,0,7.6594323,2702.0005,-7795.5738)"
       id="g3766">
      <path
         d="m -401.264,1167.506 0,2.8346 1.41732,0"
         id="path4668"
         style="fill:none;stroke:#000000;stroke-width:0.53149605;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
      <path
         d="m -401.264,1162.5164 c 0,0 -0.5132,-0.012 -0.5132,0.6511 0,0.3318 0,0.1926 0,0.5423 0,0.3989 -0.64122,0.3626 -0.64122,1.0261 0,0.5996 0.047,0.4425 0,0.8135 -0.047,0.371 -0.76981,0.356 -0.76981,1.1045 0,0.9955 0.64122,0.8521 0.64122,0.8521 l 1.28301,0"
         id="path4711-1"
         style="fill:none;stroke:#000000;stroke-width:0.53149605;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
      <path
         d="m -401.264,1162.5164 c 0,0 0.5132,-0.012 0.5132,0.6511 0,0.3318 0,0.1926 0,0.5423 0,0.3989 0.64122,0.3626 0.64122,1.0261 0,0.5996 -0.047,0.4425 0,0.8135 0.047,0.371 0.76981,0.356 0.76981,1.1045 0,0.9955 -0.64122,0.8521 -0.64122,0.8521 l -1.28301,0"
         id="path4711-1-3"
         style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.53149605;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
    </g>
  </g>
</svg>

What, if any, is the necessary CSS?

On reflection, this may be a more general CSS question: How to override part of a style ?

Normally (in CSS) the way you would achieve this would be via use of the !important flag.

svgIV.setCSS(String.format("* { fill:%s !important; }", color););

Unfortunately, the CSS system in AndroidSVG does not yet support !important . It's on my TODO list.

In the meantime, you will need to convert those SVGs to use either attributes ( fill="whatever" ) or CSS. You can easily convert those files to use attribute form, by loading them into Inkscape and save as "Optimized SVG".

This fork was created in response to the question.

It allows full color control over any .svg via a user-defined callback and is great for users who do not wish to manually convert 2,735 Inkscape definitions to conform with the current restriction.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM