CSS rules involving children selectors not applied about savesvgaspng HOT 3 CLOSED

You're correct. The CSS rules end up within the <def> section of the SVG just as they are in your CSS rules, which means that if you have a selector for a parent element of the SVG, none of your CSS rules will be applied within the SVG.

You're not doing anything wrong. This is just a scenario I hadn't personally run into, but is a perfectly reasonable one.

Pruning a prefix from any CSS selectors would probably only fix a subset of the problem. Also, it's awkward to have to work out CSS rules and selector prefixes.

One way to address this would be to apply the styling rules directly to the elements in the SVG before the node is cloned. However, I don't like mutating the original SVG. Also, it would re-introduce Element.querySelectAll, which means it wouldn't handle selectors like [ng:name].

I'll have to think about how to handle this. Suggestions are welcome.

from savesvgaspng.

I agree, the "cleanest" way would be to apply the styling rules directly. I think you can traverse the rules, check if they apply to the original element, then add them to the cloned element/children in-line (reintroducing querySelectAll and its issues unfortunately).

It's quite the hassle though and probably not worth the effort if no one else is running into this problem =)

In case anyone else is interested, I'm applying this "quick and dirty" hack before outer.appendChild(clone):

// Traverse through the ancestors of the element, stopping before the body, and append the class
var curr = el;
while (curr = curr.parentElement) {
  if (curr.tagName == "body") break;
  // classList might have to be polyfilled in certain browsers (http://stackoverflow.com/a/14101453) 
  for (var i = 0; i < curr.classList.length; i++) {
    clone.classList.add(curr.classList[i]);
  }
}

But this is really a cheat, working only because I ultimately use SVG elements as the last element in my CSS selectors (e.g. rect, text, line, etc.).

from savesvgaspng.

I've added a hook for rewriting CSS selectors. The third argument of saveSvgAsPng should now be an options object, and if a CSS rule matches within the SVG being exported, it will call the selectorRemap function and use the returned selector instead of the one specified in the original stylesheet.

An example:

saveSvgAsPng(document.getElementById('test'), 'test.png', {
  selectorRemap: function(s) {return s.replace('#svg-id', '')}
});

This rewrites CSS rules such as #svg-id circle to just circle.

It's not as automatic as I might like, but it's versatile. Let me know if it doesn't solve your problem.

from savesvgaspng.