Open adamdyson opened 7 years ago
It took me a while to figure out why nothing was visible, at first I thought it was because the orginal SVG wrapped the symbol
elements in a <g>
. But what fixed it was doing a bulk find/replace and removing the fill attribute fill="none"
on the exported SVG.
I haven't looking into the code but it's as if the fill colour isn't inherited from the parent group, when no fill colour is defined for the symbols themselves.
I converted your svg into a one-liner and created a Sketch for testing
However, there is some text visible ("Chinese 漢 & English"). What would be the expected behaviour?
Personally I'm not seeing this, it may be because I'm using node with paper-jsdom
? I've since started piping the each path as JSON via stdin
for my particular use-case. I'm happy to close this issue you're satisfied the problem does not exist.
@iconexperience @adamdyson i think I'm running into a similar situation.
here's what the svg looks like (contains no raster images, just symbols, shapes, groups, and paths iirc)
and here's what it looks like in the one line svg in sketch
Removing all references to fill:none on the export did not solve the problem.
The example is hard to follow bc it was an exported svg from a map service. If I can reproduce in a more simple example I will share.
But basically in sketch, what you see is the equivalent of taking the original SVG and removing the group withid="Line_artwork"
, that's the group that contains a bunch of <use>
elements which reference symbols from earlier in the svg.
Update: I wonder if it has to do with the <use>
element.
Here's a very simple svg example that fails in sketch:
`
`
Here's the SVG:
And here's what Sketch Looks like:
@renschler Thanks for simple example! When I open your svg in Illustrator and Inkscape, the results are same as sketch. So, it would not be a bug of the paperjs. I edit your sketch for getting your wish result. link I guess that we need to write svg more formal way, but sorry I don't know well about svg format.
interesting!
I'll addxmlns:xlink="http://www.w3.org/1999/xlink"
to my map svg and change all the href
s to xlink:href
s and see if it works.
(update in a comment below - it turns out my map svg already had this)
my example was pulled from here on MDN. It's their example code for the <use>
element, so it's strange that this is not supported in illustrator or inkscape.
also @sapics in your example link the colors didn't come through, all the circles are black. Do you think that is a bug?
so it turns out my map SVG already has the line xmlns:xlink="http://www.w3.org/1999/xlink"
and it uses xlink:href
as opposed to just href
.
So I'm wondering if my issue is caused by the style on the <use>
elements not being applied. Which is consistent with the example sketch @sapics provided.
I'll open this as a separate issue if others agree (this does not seem to be related to the Symbol issue this was originally filed for).
@renschler Oh, it's strange :) In my chrome and firefox in windows 10 and safari in iphone, it is not black. It might depends on svg parser of browser. Which browser do you check?
oh yeah you are right @sapics , i was using brave browser and i think the fingerprinting shields mess with canvas stuff. when I turned them off the style was applied correctly.
So I'm not sure what the issue is with my map svg, i guess it could be a symbol thing but no idea. It works in inkscape, and just opening the svg in a browser works, but not after import with paperjs. I'll try to find a simple example where I can reproduce it.
I'm trying to process some SVG that was produced by pango. However nothing is visible.
This is the SVG content being passed to Paper.
Below is the JavaScript I'm using to try and export the minimum bounding box.
The SVG returned from Paper looks like this.