Inkscape shell - change text - shell

Is there any verb/action in Inkscape --shell mode to change/edit text in svg? I know I can do it in svg directly, but shell mode without temporary files seems cleaner to me.
BTW any chance of reading/writing files from/to stdin/stdout in shell mode? Same reason - avoid temp. files.
SVG file - critical part almost at the bottom - "text to edit"
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg1090"
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
sodipodi:docname="drawing.svg">
<defs
id="defs1084" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="400"
inkscape:cy="560"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
inkscape:document-rotation="0"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1027"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata1087">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<text
xml:space="preserve"
style="font-weight:bold;font-size:6.35px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial Bold';letter-spacing:0px;word-spacing:0px;stroke-width:0.264583"
x="42.333332"
y="46.113091"
id="text1655"><tspan
sodipodi:role="line"
id="tspan1653"
x="42.333332"
y="46.113091"
style="stroke-width:0.264583">text to edit</tspan></text>
</g>
</svg>


If you're after modifying the SVG with various different texts, try the https://gitlab.com/Moini/nextgenerator extension.
It should also be possible to run it standalone (never tried that, though).

Related

When importing an SVG into powerpoint or inkscape transparent sections turn black

When I add an SVG file to powerpoint or inkscape the transparent sections turn black. However, opening in Gapplin or a browser such as Chrome shows no issue.
OS: 10.14.2 (18C54)
Powerpoint version: 16.21 (190115)
SVG:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1440"
height="606" viewBox="392.375339276098 169.601943186359
1658.8799999999999 698.1120000000001" preserveAspectRatio="none"><defs
id="bmaDefs"><marker id="Activator" refX="4" refY="0" markerWidth="8"
markerHeight="4" orient="auto" viewBox="0 -2 4 4"><polyline
points="0,2 4,0 0,-2" fill="none" stroke="#808080"
stroke-width="1px"/></marker><marker id="Inhibitor" refX="0" refY="0"
markerWidth="2" markerHeight="6" orient="auto" viewBox="0 -3 2
6"><line x1="0" y1="3" x2="0" y2="-3" fill="none" stroke="#808080"
stroke-width="2px"/></marker></defs><g transform="translate(875,
420)"><rect x="-122.5" y="-137.2" width="245" height="274.4"
stroke="none" fill="transparent"/><path d="M249,577 C386.518903,577
498,447.83415 498,288.5 C498,129.16585 386.518903,0 249,0
C111.481097,0 0,129.16585 0,288.5 C0,447.83415 111.481097,577 249,577
Z M262,563 C387.368638,563 489,440.102164 489,288.5 C489,136.897836
387.368638,14 262,14 C136.631362,14 35,136.897836 35,288.5
C35,440.102164 136.631362,563 262,563 Z" stroke="transparent"
fill="#FAAF40" fill-rule="evenodd" transform="scale(0.45)
translate(-250, -290)" onmouseover="BMA.SVGHelper.AddClass(this,
'modeldesigner-element-hover')"
onmouseout="BMA.SVGHelper.RemoveClass(this,
'modeldesigner-element-hover')" class="null"/><ellipse cx="5" cy="0"
rx="102" ry="124" stroke="none" fill="transparent"/><text x="0" y="0"
transform="translate(-115, -99)" font-size="31" font-family="OpenSans"
src="local('Segoe UI'), local('Frutiger'), local('Frutiger Linotype'),
local('Dejavu Sans'), local('Helvetica Neue'), local('HelveticaNeue'),
local('Arial'), local('sans serif'), local('sans-serif')"
fill="black">C0</text></g><g transform="translate(853.4517837205423,
399.1192765196926)"><path
d="M27.3,43.4l-2.2-0.8c-12-4.4-19.3-11.5-20-19.7c0-0.5-0.1-0.9-0.1-1.4c-5.4-2.6-9-7.3-10.5-12.3c-0.6-2-0.9-4.1-0.8-6.3c-4.7-1.7-8.2-4.7-10.3-8.2c-2.1-3.4-3.2-8.1-2.1-13.4c-6.7-1.8-12.5-4.3-15.9-5.8l-7.4,19.9l26.7,7.9L-17,9.1l-32.8-9.7l11.9-32l3,1.5c3.9,1.9,10.8,4.9,18.1,6.9c1.9-4,5.1-8.1,10-12.1c10.8-8.9,19.7-8.1,23.8-3.4c3.5,4,3.6,11.6-4.2,18.7c-6.3,5.7-16.2,5.7-25.7,3.8c-0.6,3.2-0.2,6.2,1.4,8.9c1.3,2.2,3.4,4,6.3,5.3C-3.4-8.3,0.7-13.2,8-16c15.9-6.1,19.9,0.2,20.7,2.2c2.1,5.2-2.4,11.8-10.1,15C11.5,4.2,5.1,5-0.3,4.4C-0.2,5.5,0,6.5,0.3,7.5c0.9,3.2,3,6.1,6.2,8C8,12.1,11,9,15,6.7C25,1,32.2,1.6,35.7,4.2c2.3,1.7,3.3,4.3,2.7,7.1c-1.1,5.3-7.6,9.7-17.5,11.8c-3.6,0.8-6.8,0.8-9.7,0.4c1,4.9,6,9.5,13.9,12.8l7.4-10.7l17.4,10.1l-3,5.1l-12.6-7.4L27.3,43.4L27.3,43.4z
M12.1,17.5c2.2,0.3,4.8,0.3,7.6-0.3c9.4-2,12.6-5.6,12.9-7.2c0.1-0.4,0-0.7-0.4-1c-1.4-1-6.2-1.7-14.1,2.9C15.2,13.4,13.2,15.4,12.1,17.5L12.1,17.5z
M0.6-1.5C5-1,10.3-1.7,16.3-4.2c5.4-2.3,7.4-6,6.9-7.3c-0.4-1-4.3-2.2-13,1.1C5-8.5,2-5.1,0.6-1.5L0.6-1.5z
M-10.8-22.8c7.8,1.4,15.2,1.3,19.5-2.6c4.7-4.2,5.4-8.4,3.7-10.4c-2.1-2.5-8.3-1.9-15.5,4.1C-6.5-28.9-9.1-25.9-10.8-22.8L-10.8-22.8z"
stroke="transparent" fill="#EF4137" stroke-width="8"
transform="scale(0.25)" onmouseover="BMA.SVGHelper.AddClass(this,
'modeldesigner-element-hover')"
onmouseout="BMA.SVGHelper.RemoveClass(this,
'modeldesigner-element-hover')" class="null"/></g></svg>

SVG turns into black after import

I have the attached SVG that looks fine in my browser, but if I want to import it to figma, it shows only a black box.
It is not a rgba syntax which causes problems. (like in this answer)
But I don't know which elements are also not allowed.
<?xml version="1.0" encoding="UTF-8"?>
<svg class="cracker-loading-logging" width="500px" viewBox="0 0 782 415" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="logo-logging">
<!-- Outline -->
<path d="M204.5,396.510452 C191.445231,396.510452 190.685044,406.440239 178.390463,404.821626 C166.095882,403.203014 167.931614,393.414826 155.321676,390.036003 C142.711738,386.65718 139.407435,396.051866 127.950709,391.306335 C116.493984,386.560804 120.800535,377.581263 109.494774,371.053879 C98.1890124,364.526494 92.5657773,372.745848 82.727664,365.196798 C72.8895508,357.647748 79.3734361,350.088795 70.1423206,340.857679 C60.9112051,331.626564 53.3522519,338.110449 45.8032021,328.272336 C38.2541522,318.434223 46.4735056,312.810988 39.9461212,301.505226 C33.4187369,290.199465 24.4391957,294.506016 19.6936646,283.049291 C14.9481335,271.592565 24.3428195,268.288262 20.9639968,255.678324 C17.585174,243.068386 7.79698582,244.904118 6.17837353,232.609537 C4.55976123,220.314956 14.4895476,219.554769 14.4895476,206.5 C14.4895476,193.445231 4.55976123,192.685044 6.17837353,180.390463 C7.79698582,168.095882 17.585174,169.931614 20.9639968,157.321676 C24.3428195,144.711738 14.9481335,141.407435 19.6936646,129.950709 C24.4391957,118.493984 33.4187369,122.800535 39.9461212,111.494774 C46.4735056,100.189012 38.2541522,94.5657773 45.8032021,84.727664 C53.3522519,74.8895508 60.9112051,81.3734361 70.1423206,72.1423206 C79.3734361,62.9112051 72.8895508,55.3522519 82.727664,47.8032021 C92.5657773,40.2541522 98.1890124,48.4735056 109.494774,41.9461212 C120.800535,35.4187369 116.493984,26.4391957 127.950709,21.6936646 C139.407435,16.9481335 142.711738,26.3428195 155.321676,22.9639968 C167.931614,19.585174 166.095882,9.79698582 178.390463,8.17837353 C190.685044,6.55976123 191.445231,16.4895476 204.5,16.4895476 C217.554769,16.4895476 218.314956,6.55976123 230.609537,8.17837353 C242.904118,9.79698582 241.068386,19.585174 253.678324,22.9639968 C266.288262,26.3428195 269.592565,16.9481335 281.049291,21.6936646 C292.506016,26.4391957 288.199465,35.4187369 299.505226,41.9461212 C310.810988,48.4735056 316.434223,40.2541522 326.272336,47.8032021 C336.110449,55.3522519 329.626564,62.9112051 338.857679,72.1423206 C348.088795,81.3734361 355.647748,74.8895508 363.196798,84.727664 C370.745848,94.5657773 362.526494,100.189012 369.053879,111.494774 C375.581263,122.800535 384.560804,118.493984 389.306335,129.950709 C394.051866,141.407435 384.65718,144.711738 388.036003,157.321676 C391.414826,169.931614 401.203014,168.095882 402.821626,180.390463 C404.440239,192.685044 394.510452,193.445231 394.510452,206.5 C394.510452,219.554769 404.440239,220.314956 402.821626,232.609537 C401.203014,244.904118 391.414826,243.068386 388.036003,255.678324 C384.65718,268.288262 394.051866,271.592565 389.306335,283.049291 C384.560804,294.506016 375.581263,290.199465 369.053879,301.505226 C362.526494,312.810988 370.745848,318.434223 363.196798,328.272336 C355.647748,338.110449 348.088795,331.626564 338.857679,340.857679 C329.626564,350.088795 336.110449,357.647748 326.272336,365.196798 C316.434223,372.745848 310.810988,364.526494 299.505226,371.053879 C288.199465,377.581263 292.506016,386.560804 281.049291,391.306335 C269.592565,396.051866 266.288262,386.65718 253.678324,390.036003 C241.068386,393.414826 242.904118,403.203014 230.609537,404.821626 C218.314956,406.440239 217.554769,396.510452 204.5,396.510452 Z" id="Base" fill="#FFFFFF"
style=".cracker-loading-logging {fill: #FFFFFF;}"></path>
<!-- Mouth cut out -->
<polygon class="cut" fill="#000000" points="204 206.5 411 405 411 8"></polygon>
<!-- Dots in surface -->
<circle fill="#000000" cx="147" cy="107" r="16"></circle>
<circle fill="#000000" cx="261" cy="107" r="16"></circle>
<circle fill="#000000" cx="261" cy="305" r="16"></circle>
<circle fill="#000000" cx="147" cy="305" r="16"></circle>
<circle fill="#000000" cx="80" cy="206" r="16"></circle>
</mask>
</defs>
<rect mask="url(#logo-logging)" width="100%" height="100%"/>
</svg>

The 'styleattribute is definitely wrong. You can't put CSS selectors in astyle` element. You can remove it anyway as it doen't seem to be doing anything useful. Maybe Figma doesn't like it. Removing it could help I suppose.
If it is still showing just a black rectangle, then that would indicate that Figma either doesn't support the mask element, or is having trouble parsing or dereferencing it. Are there other SVGs in your document that could have the same id="logo-logging"? If there are, then this SVG could be using the wrong mask definition.
It doesn't need to be a mask. In fact, it is a little wierd that your icon is a pie shape cut out of a rectangle. If you change it to just being a pie shape, I imagine it will work better in Figma.
Here's a version that doesn't use masks. It should import okay.
<?xml version="1.0" encoding="UTF-8"?>
<svg class="cracker-loading-logging" width="500px" version="1.1" viewBox="0 0 782 415" xmlns="http://www.w3.org/2000/svg"><!-- Outline -->
<path transform="matrix(1.564 0 0 1.564 0 -117)" d="m218.5 122.4c-0.5938-0.4203-1.193-0.8705-1.809-1.486-5.902-5.902-1.757-10.74-8.047-15.56s-9.885 0.4274-17.11-3.746c-7.229-4.174-4.476-9.915-11.8-12.95s-9.437 2.973-17.5 0.8125c-8.063-2.16-6.889-8.418-14.75-9.453-7.861-1.035-8.348 5.314-16.7 5.314s-8.832-6.349-16.69-5.314c-7.861 1.035-6.687 7.293-14.75 9.453-8.063 2.16-10.17-3.847-17.5-0.8125s-4.572 8.776-11.8 12.95c-7.229 4.174-10.82-1.081-17.12 3.746-6.29 4.827-2.145 9.66-8.047 15.56s-10.74 1.757-15.56 8.047c-4.827 6.29 0.4294 9.885-3.744 17.11-4.174 7.229-9.915 4.476-12.95 11.8-3.034 7.325 2.973 9.437 0.8125 17.5-2.16 8.063-8.418 6.889-9.453 14.75-1.035 7.861 5.312 8.348 5.312 16.7s-6.347 8.832-5.312 16.69c1.035 7.861 7.293 6.687 9.453 14.75 2.16 8.063-3.847 10.17-0.8125 17.5 3.034 7.325 8.776 4.572 12.95 11.8 4.174 7.229-1.083 10.82 3.744 17.12 4.827 6.29 9.66 2.145 15.56 8.047s1.757 10.74 8.047 15.56c6.29 4.827 9.886-0.4294 17.12 3.744 7.229 4.174 4.476 9.915 11.8 12.95 7.325 3.034 9.437-2.973 17.5-0.8125 8.063 2.16 6.889 8.418 14.75 9.453 7.861 1.035 8.346-5.312 16.69-5.312s8.834 6.347 16.7 5.312c7.861-1.035 6.687-7.293 14.75-9.453 8.063-2.16 10.17 3.847 17.5 0.8125 7.325-3.034 4.572-8.776 11.8-12.95s10.82 1.083 17.11-3.744 2.145-9.66 8.047-15.56c0.6155-0.6155 1.213-1.068 1.807-1.488l-88.03-84.42 88.03-84.42z" stroke-width=".6394"/>
<g fill="#fff"><!-- Mouth cut out --><!-- Dots in surface -->
<circle cx="147" cy="107" r="16"/>
<circle cx="261" cy="107" r="16"/>
<circle cx="261" cy="305" r="16"/>
<circle cx="147" cy="305" r="16"/>
<circle cx="80" cy="206" r="16"/>
</g>
</svg>

GSAP / TimelineMax SVG Animation of 3D Bar (3 polygons)

I've created a 3D bar in illustrator (see codepen). Now I want to animate it with TweenMax (or TimelineMax) as if it's building up from the bottom to the top.
This is the end result what I need to create:
http://postimg.org/image/pg2drnvch/
I tried a couple of things to make this happen, but without any luck.
Created a clipping-path and then try to change the Y coordinate of the 3 polygons (or wrapped them in a < g >< /g >)
Tried to animate the points of the polygon (http://greensock.com...ing-attrplugin/)
I hope someone can help me with this.
Codepen URL: http://codepen.io/boldcolin/pen/rOPPgP
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="bar_1_" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="140.5px" height="366.7px" viewBox="0 0 140.5 366.7" style="enable-background:new 0 0 140.5 366.7;" xml:space="preserve"
>
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);fill:#8BBE3F;}
.st1{clip-path:url(#SVGID_2_);fill:#81A83F;}
.st2{clip-path:url(#SVGID_2_);fill:#A1C63C;}
</style>
<g>
<defs>
<polygon id="SVGID_1_" points="80.3,0 0,40.1 0,336.7 60.2,366.7 140.5,327.1 140.5,30.7 "/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<polygon class="st0" points="140.7,169.4 0.2,178.9 0.2,350.2 60.4,380.1 140.7,340.6 "/>
<polyline class="st1" points="60.4,380.1 60.4,205.9 0.2,178.9 0.2,350.2 "/>
<polygon class="st2" points="0.2,178.9 80.5,138.7 140.7,169.4 60.4,209 "/>
</g>
This is an example: http://boldinteractive.nl/raet/bar/
Here I used a white layer on top of the bar which acts like a faux mask. But this is not how I want to make this work..

It's seems impossible to mask a polygon with a polygon and then animate the shape. I'm now using a path (in Illustrator use 'make compound path') and then use this as clipping mask.

Font not rendering properly using imagemagick converting from svg to png

I've tried my best troubleshooting and I'm still coming up short. Basically, just trying to convert a svg to png and the font is not rendering. I have the font installed on my machine; I've added all the fonts I have on my machine to a 'type.xml' document like some have said. I updated my imagemagick to use rsvg instead of msvg too.
Here's the command I'm using:
$ /usr/local/bin/rsvg-convert ~/desktop/example.svg -o ~/desktop/example.png
I attached the svg code along with the my current png.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g>
<path d="M242.3,171.9c0.1,2.1,0.6,3.9,1.2,5.5c3.9,0.7,8.8-1.4,12.6,0.2c0.9-2.6,1.1-5.9,1.2-8.9c0.1-1.7,0.2-3.4,0.4-4.6
c0.6-3.7,1.1-7.1,0.2-9.8c-0.3,0-0.5,0-0.8,0.2c-0.2,0.2-0.5,0.3-0.7,0.3c-0.9,0.3-1.7,0.8-2.7,0.6c-0.1-0.1-0.3-0.4-0.4-0.5
c-1.3,0-2.5,0-3.7,0c-0.2,0-0.4,0.1-0.5,0c-0.2-0.2-0.5-0.1-0.7-0.1c-0.2-0.1-0.4-0.2-0.7-0.2c-0.2,0-0.4,0-0.6,0.2
c-0.2,0.2-0.4,0.3-0.6,0.2c-0.5-0.4-1.1,0-1.5-0.4c-0.7,0.1-1.4-0.4-2.2-0.4c0,0-0.1,0-0.1,0C241.7,159.5,241.9,166.4,242.3,171.9z
"/>
<g>
<path d="M242.1,153.8c-0.1,0-0.1,0-0.1,0c-0.1-0.3-0.1-0.5-0.1-0.8c-0.8-0.4-1.5-1.2-1.7-2.3c-0.1-0.1-0.2-0.3-0.3-0.4
c-0.3-0.3-0.5-0.7-0.6-1.1c-0.4-0.4-0.8-0.8-1.3-1.2c-0.3-0.3-0.6-0.6-1-0.8c-0.9-0.6-1.6-1.3-2.5-1.8c-1.2-0.8-2.4-1.7-3.7-2.4
c-1.5-0.8-2.9-1.6-4.4-2.3c-0.5-0.3-1.1-0.5-1.7-0.7c-0.6-0.2-1.2-0.4-1.8-0.7c-1.3-0.6-2.6-1-3.9-1.5c-1.2-0.5-2.5-0.9-3.7-1.4
c-1.2-0.5-2.5-0.9-3.7-1.4c-1.2-0.5-2.5-1-3.7-1.3c-0.7-0.2-1.4-0.6-2.1-0.7c-0.7-0.2-1.5-0.5-2.2-0.7c-0.8-0.2-1.6-0.5-2.4-0.8
c-0.8-0.3-1.6-0.5-2.4-0.8c-1-0.4-2-0.7-3.1-1c-0.8-0.3-1.5-0.6-2.3-0.8c-0.6-0.1-1.1-0.4-1.7-0.6c-0.6-0.2-1.1-0.3-1.7-0.5
c-0.6-0.3-1.3-0.5-1.9-0.6c-1.6-0.3-3.1-0.9-4.6-1.3c-1.2-0.3-2.3-0.9-3.5-1.3c-0.9-0.3-1.7-0.9-2.8-0.7c-0.1,0.2-0.4,0.4-0.4,0.7
c0,0.4-0.2,0.7-0.4,1c-0.1,0.2-0.3,0.4-0.4,0.6c-0.2,1-0.7,1.9-1,2.9c-0.3,1.1-0.8,2.2-1.1,3.3c-0.4,1.3-0.7,2.6-1.2,3.8
c-0.7,1.8-1.1,3.8-1.8,5.6c-0.3,0.9-0.6,1.7-0.9,2.6c-0.3,0.8-0.5,1.6-0.6,2.5c-0.1,0.5-0.1,1-0.2,1.5c-0.3,1,0,1.9-0.2,2.8
c0.3,0.4,0.2,0.9,0.2,1.4c0,0.5,0.2,0.9,0.2,1.4c0.1,0.8,0,1.6,0.2,2.4c0.1,0.7,0,1.5,0.2,2.3c0.2,0.9,0,1.9,0.2,2.8
c0.2,0.8,0,1.5,0.2,2.3c0.2,0.6,0,1.3,0,1.9c0,0.6,0.1,1.3,0.2,1.9c0.1,1,0.1,2.1,0.2,3.1c0,0,0,0.1,0,0.1
c0.3,0.5,0.1,1.1,0.2,1.7c0,0.6,0.2,1.1,0.2,1.7c-0.1,1.1,0.1,2.3-0.2,3.4v12.6c0,0.1,0,0.2,0,0.2c0.3,0.4,0.1,0.9,0.2,1.3
c0.1,0.5,0.2,0.9,0.2,1.4c0,0.1,0,0.2,0,0.3c0.5,1.4,0.5,2.8,1.1,4.2c-0.1,0.8,0.4,1.4,0.6,2.1c0.2,0.7,0.5,1.4,0.7,2
c0.9,2.2,2,4.3,3,6.5c0.3,0.5,0.5,1.1,0.8,1.6c0.5,0.9,1,1.9,1.4,2.8c0.4,0.8,0.7,1.7,1.4,2.3c0.3,0,0.6,0.1,0.9-0.3
c0.1-0.2,0.3-0.2,0.5-0.3c1.2-0.7,2.6-1.2,3.9-1.7c1.4-0.6,2.8-1.2,4.2-1.8c1.4-0.6,2.9-1.2,4.3-1.8c1.2-0.6,2.5-1.1,3.7-1.7
c1.7-0.7,3.2-1.6,4.9-2.3c0.8-0.4,1.6-0.8,2.4-1.2c1.3-0.5,2.4-1.2,3.6-1.9c1.2-0.7,2.5-1.3,3.7-2c1.2-0.7,2.5-1.3,3.7-2
c1.3-0.8,2.7-1.5,4-2.3c1.1-0.6,2.2-1.3,3.3-2c0.6-0.4,1.4-0.7,2-1.2c1.4-1.1,2.9-2,4.3-3.2c1.2-1,2.4-1.9,3.6-3c1-1,2.1-2,3.1-3
c1.4-1.4,2.8-2.9,4.2-4.4c0.1-0.2,0.1-0.4,0.2-0.7h0.8c0.4-0.3,0.8-0.5,1.4-0.6c-0.6-1.7-1-3.4-1.1-5.5
C241,166.4,240.8,159.4,242.1,153.8z"/>
<path d="M331.1,160.8c0-1.7,0.2-3.4-0.1-5.1c-0.1-0.6,0.1-1.3-0.2-2c0.1-1.1-0.3-2.2-0.4-3.3c0-0.2-0.2-0.4-0.2-0.6
c0-0.3,0.1-0.6,0-0.8c-0.2-0.6-0.2-1.2-0.4-1.8c-0.2-0.6-0.2-1.2-0.4-1.8c-0.2-0.6-0.4-1.3-0.4-2c-0.5-1-0.6-2.2-0.9-3.3
c-0.3-1.3-0.7-2.5-1-3.8c-0.3-1.2-0.8-2.4-1.1-3.6c-0.7-2.1-1.5-4.1-2.3-6.2c-0.6-1.7-1.4-3.3-1.6-5.1c0-0.2-0.2-0.5-0.4-0.6
c-0.3-0.3-0.6-0.6-0.8-0.9c-0.3,0.1-0.5,0.2-0.7,0.2c-0.8,0.2-1.7,0.4-2.5,0.7c-1.2,0.4-2.3,0.8-3.5,1.3c-1.1,0.4-2.1,0.9-3.2,1.3
c-1.1,0.4-2.1,0.9-3.2,1.2c-0.9,0.2-1.7,0.5-2.6,0.7c-0.6,0.2-1.3,0.3-1.9,0.6c-0.9,0.3-1.8,0.6-2.7,0.8c-1.5,0.4-3,1-4.5,1.4
c-0.9,0.3-1.8,0.6-2.7,1c-0.9,0.3-1.7,0.6-2.6,1c-1.2,0.5-2.4,1-3.6,1.5c-1,0.4-2,0.9-3,1.4c-1.3,0.7-2.6,1.5-3.9,2.2
c-0.6,0.4-1.3,0.8-1.9,1.2c-1,0.7-2.1,1.5-3.1,2.2c-1,0.7-1.9,1.6-2.9,2.3c-0.4,0.3-0.9,0.7-1.3,1c-0.6,0.5-1.1,1-1.7,1.5
c-0.4,0.3-0.8,0.7-1.1,1c-0.5,0.4-1.1,0.8-1.6,1.2c-1,0.9-2.1,1.7-3.2,2.5c-0.7,0.6-1.5,1.3-2.2,1.9c-0.5,0.5-0.9,1.1-1.4,1.6
c-0.3,0.5-0.7,0.9-1.1,1.3c0,0.4-0.1,0.7-0.1,1c0.9,3,0.4,6.6-0.2,10.2c-0.2,1.2-0.3,2.9-0.3,4.5c-0.2,3.1-0.4,6.5-1.3,9.2
c0.3,0.2,0.5,0.5,0.7,0.7c0.1,0,0.2,0.1,0.4,0.1c0.2,0.2,0.3,0.5,0.4,0.7c0.2,0,0.3,0,0.4,0.1c0.4,0.3,0.8,0.7,1.2,1.1
c0.4,0.4,0.8,0.7,1.2,1.1c1.1,1.1,2.2,2.2,3.2,3.3c1,1,2,2.1,3,3.1c0.9,0.8,1.8,1.6,2.7,2.3c0.6,0.5,1.2,0.9,1.7,1.4
c1.6,1.2,3.2,2.3,4.8,3.4c1.2,0.8,2.5,1.6,3.8,2.4c1.3,0.7,2.6,1.4,3.8,2.1c1.1,0.6,2.2,1,3.2,1.6c0.5,0.3,1.1,0.5,1.7,0.8
c0.7,0.3,1.4,0.7,2.2,1c0.8,0.3,1.4,0.7,2.2,1c0.7,0.3,1.5,0.6,2.2,1c0.7,0.4,1.4,0.6,2.1,0.9c0.7,0.3,1.4,0.7,2.2,1
c1,0.4,1.9,0.7,2.8,1.2c1.1,0.5,2.3,0.8,3.3,1.5c0.5-0.1,0.8,0.3,1.2,0.5c1,0.3,2,0.8,3,1.2c0.9,0.4,1.9,0.8,2.8,1.2
c1.1,0.5,2.1,0.8,3.1,1.4c0.5,0.3,1,0.5,1.5,0.7c0.7-0.2,1.1-0.7,1.2-1.4c0-0.3,0.2-0.5,0.3-0.7c0.8-1.7,1.6-3.4,2.4-5.1
c0.7-1.5,1.4-3,2-4.6l0.8-2c0.6-1.6,1.2-3.2,1.7-4.8c0.3-0.9,0.7-1.8,0.8-2.7c0.2-1,0.5-1.9,0.6-2.8c0.2-1.2,0.6-2.4,0.9-3.6
c0.1-0.5,0-1.1,0.2-1.4c0.2-0.5,0-1,0.3-1.4c0.2-1.7,0.9-3.2,0.9-4.8c0.4-0.3,0.1-0.8,0.3-1.2c0.2-0.4,0-0.9,0.1-1.3
c0.1-0.4,0.1-0.8,0.2-1.3c0.1-2-0.1-4,0.2-5.9c0.2-1.1,0.1-2.3,0.2-3.5C331.3,164.3,331.2,162.5,331.1,160.8z"/>
</g>
</g>
<g>
<path d="M247.5,337.9c7.6,3.2,16.2,4.9,25.4,4.9c26.5,0,48.7-15.2,48.7-30.6c0-11.1-15.1-12.9-24.3-12.9
c-19.9,0-41.8,9.3-60.5,21.3c0.2,2.5,0.2,5.2,0.2,7.7c0,32-15.9,51.7-37.1,51.7c-5.1,0-11.3-2.4-11.3-8.7
c0-12.3,20.2-35.1,46.6-52.1c-0.5-6.6-1.4-13.1-2.5-19.8c-15.9,15-28.2,33.6-41.6,33.6c-4.8,0-10-2.1-10-8.1
c0-13.5,19-25.9,32.5-33.9c5-2.9,10.9-6.3,16.7-10.2c-0.4-4.2-0.6-8.5-0.6-13c0-24.1,11.4-54.3,30.3-54.3c7.8,0,10.9,7.3,10.9,14.9
c0,21.5-18.6,38.8-37.6,51.8c0.1,3.9,0.3,7.5,0.6,11.2c9.7-7.1,21.1-12.4,34.9-12.4c2.2,0,4.4,0.2,6.7,0.5l-0.3,1.6
c-1.4-0.2-2.7-0.2-4.1-0.2c-14.6,0-26.3,7.5-36.6,16.7c0.6,7,1.4,13.7,1.9,20.5c18.7-11.7,40.4-20.5,60.2-20.5
c9,0,26.5,1.7,26.5,14.6c0,19.5-28.4,32.1-50.5,32.1c-8.7,0-17.6-1.6-26-5.1L247.5,337.9z M231.9,293.3c-0.5-3.6-1-7.2-1.3-10.9
c-5.3,3.5-10.6,6.7-15.3,9.5c-10.8,6.4-32.4,20-32.4,33c0,4,3,6.8,7.1,6.8C200,331.7,212.2,308.9,231.9,293.3z M235.4,321.6
c-25.5,16.8-44.8,38.8-44.8,49.6c0,3.8,3.2,6.3,7.5,6.3c18.7,0,37.6-23.8,37.6-49.3C235.6,326,235.5,323.9,235.4,321.6z
M233.6,278.9c18.1-12.6,36-29.9,36-50.5c0-5.1-1.9-13.2-8.6-13.2c-17.5,0-27.5,40.6-27.5,61.7V278.9z"/>
</g>
<text transform="matrix(1 0 0 1 93.4995 329.5063)" font-family="'Spinnaker-Regular'" font-size="114.694">S</text>
<text transform="matrix(1 0 0 1 328.4995 329.5063)" font-family="'Spinnaker-Regular'" font-size="114.694">J</text>
</svg>

SVG pattern contains whitespace between repetitions in Firefox

I'm using an inline svg that fills an area with a lined pattern. The svg displays correctly Chrome and Safari but on Firefox there are gaps in between the vertical repetitions of the pattern as shown below:
<svg version="1.1" id="clouds" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 744.9 203" preserveAspectRatio="xMinYMin meet ">
<pattern x="66.95" y="122" width="24" height="24" patternUnits="userSpaceOnUse" id="line-fill" viewBox="0 -24 24 24" overflow="visible">
<polygon fill="none" points="0,0 24,0 24,-24 0,-24"/>
<g>
<polygon fill="#D83D96" points="4.4,-9.5 0,-5.1 0,-6.9 9.5,-16.4 9.5,-16.4 17.1,-24 18.9,-24 16.7,-21.5 16.7,-21.5"/>
<polygon fill="#D83D96" points="4.4,-21.5 0,-17.1 0,-18.9 5.1,-24 6.9,-24"/>
<polygon fill="#D83D96" points="24,-6.9 24,-5.1 18.9,0 17.1,0 21.8,-4.4"/>
<polygon fill="#D83D96" points="24,-18.9 24,-17.1 16.7,-9.5 16.7,-9.5 6.9,0 5.1,0 9.5,-4.4 9.5,-4.4 21.8,-16.4"/>
</g>
</pattern>
<g fill="url(#line-fill)">
<circle cx="12.5" cy="22.5" r="12.5"/>
<path d="M180.5,54.5c-10.1,0-19.6,2.3-28.1,6.5c6.3-6.5,10.1-15.3,10.1-25c0-19.9-16.1-36-36-36
c-18.9,0-34.4,14.6-35.9,33.1c-4.2-4.1-9.9-6.6-16.2-6.6C61.5,26.5,51,37,51,49.9c0,12.7,10.1,23,22.6,23.4
C64.7,79.9,59,90.5,59,102.5c0,20.2,16.3,36.5,36.5,36.5c8.4,0,16.1-2.8,22.3-7.6c6,29.2,31.8,51.1,62.7,51.1c35.3,0,64-28.7,64-64
C244.5,83.2,215.8,54.5,180.5,54.5z M126.8,83.7c-6.4-10.6-18-17.7-31.3-17.7c-1.5,0-2.9,0.1-4.4,0.3c2.7-2.7,4.7-6.1,5.8-9.8
c6.5,9.4,17.3,15.6,29.6,15.6c4.4,0,8.7-0.8,12.6-2.3C134.3,73.8,130.2,78.5,126.8,83.7z"/>
<path d="M702.8,87.9v-0.3h0c-0.2-18.3-15-33.1-33.4-33.1S636.2,69.3,636,87.6h-2.2
c1.4-3.9,2.1-8.2,2.1-12.6c0-21-17-38-38-38c-16.7,0-30.8,10.7-35.9,25.7c-4.2-17.5-20.4-30.6-39.8-30.6c-18.4,0-33.9,11.7-39,27.8
V41h0c0-0.3,0-0.7,0-1c0-15.1-12.3-27.4-27.4-27.4c-15.1,0-27.4,12.3-27.4,27.4c0,0.3,0,0.7,0,1h-3.9
c-1.4-12.1-11.7-21.5-24.2-21.5c-12.5,0-22.8,9.4-24.2,21.5H376v81.3h107.3v-0.1h219.5V87.9C702.8,87.9,702.8,87.9,702.8,87.9
C702.8,87.9,702.8,87.9,702.8,87.9z M562.1,87.6h-2.6c0.6-1.2,1.1-2.5,1.5-3.8C561.4,85.1,561.7,86.4,562.1,87.6z M483.3,83.1
c0.5,1.5,1.1,3,1.8,4.5h-1.8V83.1z"/>
<circle cx="642" cy="172.6" r="30.4"/>
<circle cx="732.6" cy="173.6" r="12.2"/>
</g>
</svg>
Here is a fiddle to fiddle with: http://jsfiddle.net/Qs3Y9/
It seems to possibly be a rounding issue since the gaps disappear and reappear as the bounding box is resized but I am fairly new to svg patterns so I'm at a loss as to where to even start looking for the solution.

It happens on Webkit and other browsers also. It is just not as obvious. It is just to do with antialiasing where the pattern squares touch. You can mitigate it by not having your hatch lines terminate exactly at the pattern boundary. Have them extend past it a bit. The extensions won't be drawn but it will mean the that antialiasing will be invisible (or almost invisible).
<pattern x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse" id="line-fill" viewBox="0 0 24 24" overflow="visible" stroke="#D83D96" stroke-width="1.5">
<line x1="-2" y1="8" x2="8" y2="-2"/>
<line x1="-2" y1="20" x2="20" y2="-2"/>
<line x1="4" y1="26" x2="26" y2="4"/>
<line x1="16" y1="26" x2="26" y2="16"/>
</pattern>
Demo here: http://jsfiddle.net/Qs3Y9/2/

Resources