Related
I'm looking to mask a portion of a straight line in SVG and can really only figure out how to do it one way, but would rather do another because the line lengths will be dynamically generated and the mask portion won't.
Let me explain.
Assume I have a line that is <path d="M0,0 L0,100" stroke="blue" stroke-width="20"/>, I would like to mask with transparency the first 10 pixels, meaning just the d="M0,0 L0,10" portion.
I can do this, which produces the results I'd like:
<svg width="100" height="100">
<rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
<svg x="10" y="0" width="200" height="200" >
<defs>
<rect x="0" y="0" width="20" height="10" stroke="none"/>
<mask id="chopmask" maskUnits="userSpaceOnUse">
<rect width="20" height="90" x="0" y="10" fill="white"/>
</mask>
</defs>
<path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
</svg>
</svg>
But the issue is that I can't seem to do the opposite with the rect in the mask, wherein I simply define the it as <rect width="20" height="10" x="0" y="0" fill="white"/> (notice only height and y are different).
Am I missing something on how do define a 10x20 rectangle and have it's mask simply hide a portion of a stroked path, or is this impossible?
If I understood the question correctly, then you need to have a mask in the form of a rectangle of fixed size 10Х20, which will be applied to the line with variable length.
In this case, you can try on a combined mask, one part of which will be opaque fill = "black" and the second part will be transparent fill = "white" and show the rest of the line.
<svg width="100" height="100">
<rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
<svg x="10" y="0" width="200" height="200" >
<defs>
<mask id="chopmask" maskUnits="userSpaceOnUse">
<rect width="20" height="100" x="0" y="0" fill="white"/>
<rect width="20" height="10" x="0" y="0" fill="black"/>
</mask>
</defs>
<path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
</svg>
</svg>
An example of animating the line masking process with a rectangle 10 x 20px
<svg width="100" height="100">
<rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
<svg x="10" y="0" width="200" height="200" >
<defs>
<rect x="0" y="0" width="20" height="10" stroke="none"/>
<mask id="chopmask" maskUnits="userSpaceOnUse">
<rect width="20" height="100" x="0" y="0" fill="white"/>
<rect width="20" height="10" x="0" y="0" fill="black">
<animate attributeName="y" dur="2s" values="-10;0" fill="freeze" />
</rect>
</mask>
</defs>
<path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
</svg>
</svg>
Works for me ... am I misunderstanding what you're trying to do?
<svg width="100" height="100">
<rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
<svg x="10" y="0" width="200" height="200" >
<defs>
<rect x="0" y="0" width="20" height="10" stroke="none"/>
<mask id="chopmask" maskUnits="userSpaceOnUse">
<rect width="20" height="10" x="0" y="0" fill="white"/>
</mask>
</defs>
<path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
</svg>
</svg>
I have the following SVG code which draws many squares:
<svg width="100%" height="100%" viewBox="0,0,100%,100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" width="1.388888888888889%" height="5%" patternUnits="userSpaceOnUse">
<path fill="#2e99e5" d="M0 0h960v960H0z" stroke="gray" stroke-width="0.5"/>
</pattern>
<pattern id="grid" width="8.333333333333333%" height="50%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="url(#smallGrid)"/>
<path fill="none" d="M0 0h960v960H0z" stroke="gray" stroke-width="2" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>
Is there a way to select the first 3 <path fill="#2e99e5" d="M0 0h960v960H0z" stroke="gray" stroke-width="0.5"/>
and change the color?
I am trying to use the rotate functionality which is proved by the Halo,
I have added an element into the stencil like this..
var customMarkup = ' <path id="path123" stroke="#000000" stroke-miterlimit="10" d="M7.2,28V15.7L20.3,4.1l9-0.6v8.8c0,0-9,5-9,8.6 c0,1.7,0,7.2,0,7.2H7.2z"/> <polyline id="polyline125" stroke="#000000" stroke-miterlimit="10" points="20.1,4.3 20.1,2.4 32.2,2.4 30.4,11.8 29.3,11.8 "/> <g id="g127"> <path id="path129" stroke="#000000" stroke-miterlimit="10" d="M32.2,2.4h1.9c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4L43,2.8c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4L56,2.8c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h3c2.1,0,2.7,1.2,2.7,2.2v4.9c0,0.7-0.6,1.2-1.2,1.2 H30.6"/> </g> <polyline id="polyline131" stroke="#000000" stroke-miterlimit="10" points="68.8,4 74.2,4 74.2,9.2 68.8,9.2 "/> <g id="g133"> <line id="line135" stroke="#000000" stroke-miterlimit="10" x1="68.6" y1="5.6" x2="66.3" y2="5.6"/> <line id="line137" stroke="#000000" stroke-miterlimit="10" x1="66.5" y1="7.6" x2="68.8" y2="7.6"/> <path id="path139" stroke="#000000" stroke-miterlimit="10" d="M68.6,5.6c0,0,0.1,0.8,0.1,1c0,0.3-0.1,1-0.1,1 s0.1,0.8,0.1,1s-0.1,1-0.1,1h-2.8c0,0-0.1-0.8-0.1-1s0.1-1,0.1-1s-0.1-0.8-0.1-1s0.1-1,0.1-1v0c0,0-0.1-0.8-0.1-1 c0-0.3,0.1-1,0.1-1h2.8c0,0,0.1,0.8,0.1,1C68.8,4.8,68.6,5.6,68.6,5.6L68.6,5.6z"/> </g> <line id="line141" stroke="#000000" stroke-miterlimit="10" x1="16.4" y1="7.5" x2="11.6" y2="7.5"/> <line id="line143" stroke="#000000" stroke-miterlimit="10" x1="11.6" y1="10.1" x2="13.5" y2="10.1"/> <path id="path145" stroke="#000000" stroke-miterlimit="10" d="M11.6,11.9c0,0-0.2-0.1-0.2-0.4c0-0.3,0.2-1.3,0.2-1.3 s-0.2-1-0.2-1.3c0-0.3,0.2-1.3,0.2-1.3v0c0,0-0.2-1-0.2-1.3c0-0.3,0.2-1.3,0.2-1.3h4.9c0,0,0.2,1,0.2,1.3c0,0.3-0.2,1.3-0.2,1.3v0" /> <g id="g147"> <line id="line149" stroke="#000000" stroke-miterlimit="10" x1="10.2" y1="7.5" x2="9" y2="7.5"/> <line id="line151" stroke="#000000" stroke-miterlimit="10" x1="9" y1="10.1" x2="10.3" y2="10.1"/> <path id="path153" stroke="#000000" stroke-miterlimit="10" d="M10.2,7.2c0,0,0.1,1.1,0.1,1.5c0,0.4-0.1,1.5-0.1,1.5 s0.1,1.1,0.1,1.5c0,0.4-0.1,1.1-0.1,1.1H9c0,0-0.1-0.7-0.1-1.1c0-0.4,0.1-1.5,0.1-1.5S8.9,9.1,8.9,8.7C8.9,8.3,9,7.2,9,7.2v0 c0,0-0.1-1.1-0.1-1.5C8.9,5.3,9,4.9,9,4.9h1.2c0,0,0.1,0.5,0.1,0.8C10.3,6.1,10.2,7.2,10.2,7.2L10.2,7.2z"/> </g> <path id="path155" stroke="#000000" stroke-miterlimit="10" d="M38.6,19.8v0.5c-0.4,0.2-0.5,0.7-0.5,0.7l0,1.4 c0,0.7,2.1,0.5,4.2,0.5c2.2,0,4.3,0.1,4.3-0.6l0-1.3c0,0,0.1-0.5-0.4-0.8v-0.5"/> <path id="path157" stroke="#000000" stroke-miterlimit="10" d="M39.2,12.9v0.4c-0.3,0.1-0.2,0.4-0.2,0.4l0,0.6 c0,0.6,6.8,0.5,6.8,0v-0.5c0,0,0.1-0.4-0.2-0.6v-0.4"/> <path id="path159" stroke="#000000" stroke-miterlimit="10" d="M38.9,13.8c-0.4,0.2-0.7,0.3-0.8,0.8c0,0.2,0,0.8,0,0.8 c0,0.7,8.5,0.7,8.5-0.1c0,0,0-0.5,0-0.7c0-0.4-0.4-0.6-0.9-0.8"/> <path id="path161" stroke="#000000" stroke-miterlimit="10" d="M38.6,15.6v2.6c-0.4,0.2-0.5,0.7-0.5,0.7l0,0.7 c0,0.7,8.5,0.7,8.5-0.1l0-0.7c0,0,0.1-0.5-0.4-0.8v-2.6"/> <path id="path163" stroke="#000000" stroke-miterlimit="10" d="M38.1,20.9c0,0.7,8.5,0.7,8.5-0.1"/> <path id="path165" stroke="#000000" stroke-miterlimit="10" d="M38.1,18.7c0,0.7,8.5,0.7,8.5-0.1"/> <path id="path167" stroke="#000000" stroke-miterlimit="10" d="M39,13c0.7,0,1.6,0.1,3.4,0.1c1.7,0,3.2-0.2,3.4-0.2"/> <path id="path169" stroke="#000000" stroke-miterlimit="10" d="M38.1,15.2c0,0.7,8.5,0.7,8.5-0.1"/> <polygon id="polygon171" stroke="#000000" stroke-miterlimit="10" points="46.6,24.6 38.1,24.4 38.1,22.5 40,22.9 44.8,22.9 46.6,22.4 "/> <polygon id="polygon173" stroke="#000000" stroke-miterlimit="10" points="50.8,26.2 33.8,26.1 33.8,24.7 50.8,24.5 "/> <polygon id="polygon175" stroke="#000000" stroke-miterlimit="10" points="48.3,28.1 36.3,28 36.3,26.6 48.3,26.4 "/> <polyline id="polyline177" stroke="#000000" stroke-miterlimit="10" points="17.3,6.9 17.3,3.5 20.1,3.5 "/> <path id="path179" stroke="#000000" stroke-miterlimit="10" d="M16.5,4.9c0.1-0.6,0.2-1,0.3-1c0.2,0,0.4,1.1,0.5,2.8"/> <path id="path181" stroke="#000000" stroke-miterlimit="10" d="M11.4,12c0,0-0.2,0.4-0.6,0.4c-0.6,0-0.6-0.4-0.6-0.4 V5.6c0,0,0.1-0.3,0.6-0.3c0.6,0,0.6,0.3,0.6,0.3V12z"/> <path id="path183" stroke="#000000" stroke-miterlimit="10" d="M5,10.8c0,0,0,0.2-0.4,0.2s-0.4-0.2-0.4-0.2v-4 c0,0,0.1-0.2,0.4-0.2C5,6.6,5,6.8,5,6.8V10.8z"/> <rect id="rect185" x="5" y="7" stroke="#000000" stroke-miterlimit="10" width="1.3" height="3.5"/> <polygon id="polygon187" stroke="#000000" stroke-miterlimit="10" points="8.9,11.7 6.3,11.7 6.3,8.8 6.3,6 8.9,6 "/> <rect id="rect189" x="6.7" y="33" stroke="#000000" stroke-miterlimit="10" width="59.8" height="64"/> <polygon id="polygon191" stroke="#000000" stroke-miterlimit="10" points="58.5,28.1 55.1,28.1 55.7,10.8 57.8,10.8 "/> <polygon id="polygon193" stroke="#000000" stroke-miterlimit="10" points="64.3,28.1 60.8,28.1 61.5,10.8 63.6,10.8 "/> <g id="g195"> <path id="path197" stroke="#000000" stroke-miterlimit="10" d="M72.9,31.5c0,0.8-0.7,1.5-1.5,1.5H1.8 c-0.8,0-1.5-0.7-1.5-1.5v-2C0.3,28.7,1,28,1.8,28h69.6c0.8,0,1.5,0.7,1.5,1.5V31.5z"/> </g> <g id="g199"> <path id="path201" stroke="#000000" stroke-miterlimit="10" d="M72.9,100.5c0,0.8-0.7,1.5-1.5,1.5H1.8 c-0.8,0-1.5-0.7-1.5-1.5v-2C0.3,97.7,1,97,1.8,97h69.6c0.8,0,1.5,0.7,1.5,1.5V100.5z"/> </g> <g id="g203"> <path id="path205" stroke="#000000" stroke-miterlimit="10" d="M68.6,72.7c0,0.8-0.7,1.5-1.5,1.5h-61 c-0.8,0-1.5-0.7-1.5-1.5v-2c0-0.8,0.7-1.5,1.5-1.5h61c0.8,0,1.5,0.7,1.5,1.5V72.7z"/> </g> <path id="path207" stroke="#000000" stroke-miterlimit="10" d="M4.3,10.4c0,0,0,0.2-0.7,0.2s-0.7-0.2-0.7-0.2V7.2 c0,0,0.2-0.1,0.7-0.1c0.7,0,0.7,0.1,0.7,0.1V10.4z"/>';
var customElement = joint.shapes.basic.Image({
markup: '<g class="scalable"><g class="rotatable"><g class="myClass">' + customMarkup+ '</g></g></g><text/>',
type: 'basic.Image1',
attrs: {
'text': { text: 'asdf' },
height: 500,
width: 100,
'.myClass': {
fill: '#ffffff'
}
}
})
The element looks fine on the Stencil and it looks good when i drag it and drop it onto the paper,
Now I would like to rotate it, and i am having a really hard time in trying to make it happen.
In case i resize the element and then try to rotate it.. and then resize it again all the transformations are completely messing up like in the image below..
I read an article and learn that the svg rotations are not similar to what is done in css so tried the following on click of a button but that did not help either.
My goal is to keep the custom SVG element within the halo when it rotates and not allow it to skew up
I also tried to do the rotation on the click of a button instead of using the Halo like as follows.. but does not help
jQuery('#btn-rotate').on('mousedown', _.bind(function (evt) {
var x = this.selection.models[0].attributes.position.x;
var y = this.selection.models[0].attributes.position.y
var height = this.selection.models[0].attributes.size.height;
var width = this.selection.models[0].attributes.size.width;
this.selection.models[0].rotate(93, [false, { x: x+width/2, y: y+height/2}]);
}, this));
Would really appreciate your help.
Thanks
Vishu
It's not supported to nest the rotatable group into the scalable group in JointJS. The groups can be omitted (together or individually) or the scalable group can be a child of the rotatable group. Only the following schemes can be used.
<g class="rotatable"/><g class="scalable"></g></g>
<g class="rotatable"></g>
<g class="scalable"></g>
In your case the rotatable and the scalable group needs to be swapped.
<g class="rotatable"><g class="scalable"><g class="myClass"><!-- custom markup --></g></g></g><text/>
For more please see demo.
I have an SVG vector object that consists of a few paths, some of which need to be masked.
For this I've made 5 SVG masks. All of them seem to be working (i.e. masking their respective object), except for one! I'm probably missing something obvious, but I'm not seeing it.
In short: how do I get the visible element within the circle to be properly masked? Any pointers would be hugely appreciated.
The object is up at this pen: http://codepen.io/anon/pen/LNYOya
SVG code:
<svg version="1.1" id="het-lekkerste-van" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="504.789px" height="186.027px" viewBox="0 0 504.789 186.027" enable-background="new 0 0 504.789 186.027"
xml:space="preserve">
<defs>
<g id="l-masks">
<mask id="mask-l-3">
<path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M59.644,94.138
c0,0,70.4-35.679,57.122-49.875"/>
</mask>
<mask id="mask-l-2-2">
<path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M117.631,45.638
c0,0-12.5-12.875-25,29.75"/>
</mask>
<mask id="mask-l-2-1">
<path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M92.144,74.763c0,0-16.375,62-41.75,59.5"/>
</mask>
<mask id="mask-l-1-2">
<path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M53.644,134.263
c0,0-8.5,0.25-8-7.5c0,0,0.5-10.875,27.25-7.75"/>
</mask>
<mask id="mask-l-1-1">
<path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M73.519,118.638
c0,0,19.25,4.25,20.375,5.125c0,0,13.875,2.625,17,0.75c0,0,16.875-3.625,28.125-20.25"/>
</mask>
</g>
<mask id="mask-cirkel">
<path fill="none" stroke="#ffffff" stroke-width="9" stroke-miterlimit="10" d="M3.6829999999999927,93.014a89.013,89.013 0 1,0 178.026,0a89.013,89.013 0 1,0 -178.026,0"/>
</mask>
</defs>
<path id="cirkel" style="mask: url(#mask-cirkel);" d="M92.696,186.027c-51.288,0-93.013-41.726-93.013-93.014S41.409,0,92.696,0s93.013,41.727,93.013,93.015
S143.984,186.027,92.696,186.027z M92.696,8C45.82,8,7.683,46.137,7.683,93.014s38.137,85.014,85.013,85.014
s85.013-38.137,85.013-85.014S139.573,8,92.696,8z"/>
<g id="l">
<path id="l-1-1" style="mask: url(#mask-l-1-1);" d="M118.746,42.38l-3.498,5.077c0.135,0.371,0.228,0.785,0.228,1.29c0,1.65-0.766,3.502-2.271,5.494
c-1.588,2.098-3.459,4.146-5.561,6.075c-2.14,1.962-4.335,3.812-6.527,5.482c-1.211,0.929-2.298,1.739-3.253,2.43c0,0,0,0,0,0.001
c-3.865,2.9-8.178,5.521-8.178,5.521s0,0,0-0.001l-0.001,0.001c-2.521,1.682-5.14,3.347-7.78,4.97
c-2.713,1.658-5.338,3.208-7.806,4.585c-2.527,1.424-4.851,2.702-6.899,3.815c-2.042,1.107-3.896,2.075-5.532,2.898
c-1.55,0.843-1.875,1.933-1.875,2.695c0,1.421,0.898,2.271,2.402,2.271c0.198,0,0.511-0.032,1.315-0.308l0.124-0.055
c2.767-1.469,6.344-3.409,10.936-5.924c3.87-2.13,7.981-4.514,12.254-7.1c0,0,3.608-2.058,8.171-5.201
c1.803-1.205,4.122-2.822,6.905-4.802c2.9-2.066,5.806-4.412,8.63-6.972c2.823-2.557,5.296-5.258,7.348-8.021
c2.117-2.846,3.188-5.67,3.188-8.385c0-2.021-0.543-3.74-1.62-5.114C119.234,42.836,118.996,42.599,118.746,42.38z"/>
<path id="l-1-2" style="mask: url(#mask-l-1-2);" d="M97.864,68.228c0.496-1.402,1.083-2.975,1.756-4.702c1.073-2.747,2.342-5.44,3.771-7.994
c1.407-2.516,3.021-4.69,4.799-6.467c1.699-1.701,3.532-2.527,5.604-2.527c0.656,0,1.084,0.158,1.274,0.465
c0.08,0.131,0.124,0.299,0.18,0.454l3.498-5.077c-1.082-0.948-2.517-1.436-4.295-1.436c-3.45,0-6.563,1.297-9.253,3.849
c-2.591,2.461-4.9,5.469-6.861,8.944c-1.938,3.439-3.663,7.063-5.119,10.768c-1.433,3.649-2.59,6.678-3.532,9.244
c0.014-0.008,4.316-2.625,8.176-5.52C97.863,68.229,97.863,68.229,97.864,68.228z"/>
<path id="l-2-1" style="mask: url(#mask-l-2-1);" d="M86.822,81.6c-0.608,1.686-1.287,3.558-2.038,5.631c-1.11,3.063-2.368,6.288-3.739,9.578
c-1.383,3.332-2.929,6.773-4.587,10.227c-1.564,3.256-3.271,6.333-5.078,9.163c0,0,0,0,0,0s-1.403,2.627-3.389,5.012l0,0
c0,0-0.001,0.001-0.001,0.001c-2.216,2.853-4.579,5.235-7.034,7.084c-2.675,2.015-5.534,3.042-8.5,3.079v5.547
c4.053-0.26,7.848-1.707,11.29-4.329c3.621-2.764,7.031-6.359,10.148-10.693c1.939-2.555,3.326-4.936,3.326-4.936
c1.71-2.868,3.364-5.915,4.928-9.076c1.76-3.563,3.426-7.209,4.958-10.843c1.524-3.621,2.968-7.261,4.291-10.828
c1.281-3.458,2.478-6.733,3.595-9.817C90.43,79.544,86.822,81.6,86.822,81.6z"/>
<path id="l-2-2" style="mask: url(#mask-l-2-2);" d="M52.291,131.382c-1.178,0-2.102-0.348-2.819-1.061c-0.719-0.719-1.068-1.549-1.068-2.541
c0-1.418,0.448-2.518,1.372-3.369c0.998-0.914,2.239-1.623,3.694-2.102c1.507-0.502,3.077-0.84,4.667-1.003
c1.61-0.174,2.947-0.26,3.971-0.26c1.305,0,2.573,0.021,3.763,0.064c0.715,0.026,1.426,0.061,2.122,0.1
c1.985-2.385,3.388-5.011,3.388-5.011l0-0.001c-2.656-0.234-5.478-0.35-8.395-0.35c-1.783,0-3.841,0.18-6.118,0.537
c-2.293,0.36-4.485,0.975-6.511,1.829c-2.072,0.875-3.854,2.117-5.29,3.692c-1.495,1.646-2.256,3.777-2.256,6.348
c0,2.29,0.756,4.335,2.24,6.065c1.519,1.761,3.567,2.654,6.084,2.654c0.444,0,0.884-0.026,1.322-0.054v-5.547
C52.401,131.375,52.346,131.382,52.291,131.382z"/>
<path id="l-3" style="mask: url(#mask-l-3);" d="M138.434,105.592c-0.596-0.531-1.269-0.799-1.997-0.799c-0.925,0-1.74,0.346-2.472,1.084
c-0.934,1.113-1.594,1.876-2.083,2.404c-0.52,0.563-0.994,1.06-1.426,1.49c-0.429,0.43-0.855,0.834-1.28,1.217
c-0.433,0.391-1.037,0.889-1.833,1.506c-4.298,3.696-8.269,6.258-11.805,7.621c-3.537,1.362-7.044,2.056-10.432,2.056
c-2.225,0-4.457-0.191-6.641-0.569c-2.228-0.383-4.533-0.876-6.849-1.466c-2.225-0.563-4.638-1.15-7.384-1.8
c-2.223-0.526-4.577-0.983-7.013-1.37c0,0-1.387,2.381-3.326,4.936c2.967,0.426,5.808,0.951,8.452,1.559
c2.845,0.66,5.584,1.323,8.144,1.974c2.651,0.67,5.217,1.229,7.627,1.655c2.476,0.448,5.003,0.67,7.516,0.67
c3.862,0,7.838-0.77,11.813-2.291c3.972-1.519,8.364-4.262,13.052-8.154c0.884-0.703,1.613-1.303,2.192-1.79
c0.582-0.5,1.154-1.019,1.7-1.562c0.568-0.575,1.178-1.229,1.808-1.949c0.659-0.745,1.519-1.729,2.533-2.919
c0.415-0.416,0.634-0.937,0.634-1.505C139.365,106.832,139.044,106.139,138.434,105.592z"/>
</g>
<g id="het">
<path d="M224.994,12.783h5.677v13.245h14.303V12.783h5.677v31.244h-5.677V30.913H230.67v13.114h-5.677L224.994,12.783
L224.994,12.783z"/>
<path d="M262.725,12.783h18.702v4.885h-13.025v8.186h10.518v4.885h-10.518v8.405h13.729v4.885h-19.405V12.783z"/>
<path d="M301.654,17.668H291.4v-4.885h26.185v4.885h-10.254v26.359h-5.677V17.668z"/>
</g>
<g id="lekkerste">
<path d="M224.994,75.983h5.677v26.358h13.511v4.886h-19.188V75.983z"/>
<path d="M254.869,75.983h18.702v4.885h-13.025v8.186h10.519v4.885h-10.519v8.405h13.729v4.885h-19.406V75.983L254.869,75.983z"/>
<path d="M286.329,75.983h5.677v12.718h4.049l7.35-12.718h6.161l-8.846,14.874v0.088l9.373,16.282h-6.381l-7.657-13.643h-4.049
v13.643h-5.677V75.983L286.329,75.983z"/>
<path d="M320.957,75.983h5.678v12.718h4.048l7.35-12.718h6.161l-8.846,14.874v0.088l9.373,16.282h-6.381l-7.657-13.643h-4.048
v13.643h-5.678V75.983L320.957,75.983z"/>
<path d="M355.583,75.983h18.702v4.885H361.26v8.186h10.518v4.885H361.26v8.405h13.729v4.885h-19.406V75.983z"/>
<path d="M387.044,75.983h10.076c3.39,0,4.93,0.264,6.293,0.88c3.124,1.408,5.104,4.4,5.104,8.537c0,3.74-1.98,7.217-5.28,8.537
v0.088c0,0,0.439,0.439,1.057,1.54l6.425,11.662h-6.337l-6.205-11.662h-5.456v11.662h-5.677V75.983z M397.825,90.637
c3.036,0,4.93-1.805,4.93-4.93c0-2.992-1.276-4.84-5.722-4.84h-4.313v9.77H397.825L397.825,90.637z"/>
<path d="M421.859,99.219c0,0,3.388,3.3,7.789,3.3c2.376,0,4.532-1.231,4.532-3.784c0-5.589-14.742-4.621-14.742-14.214
c0-5.193,4.489-9.065,10.474-9.065c6.161,0,9.329,3.346,9.329,3.346l-2.464,4.619c0,0-2.992-2.729-6.909-2.729
c-2.641,0-4.709,1.541-4.709,3.741c0,5.544,14.698,4.181,14.698,14.17c0,4.973-3.784,9.152-10.297,9.152
c-6.953,0-10.782-4.269-10.782-4.269L421.859,99.219z"/>
<path d="M459.16,80.868h-10.254v-4.885h26.185v4.885h-10.253v26.359h-5.678V80.868z"/>
<path d="M485.383,75.983h18.702v4.885h-13.025v8.186h10.518v4.885h-10.518v8.405h13.729v4.885h-19.405V75.983z"/>
</g>
<g id="van">
<path d="M220.989,139.184h6.117l6.864,20.375c0.615,1.804,1.145,4.576,1.188,4.576h0.088c0.044,0,0.572-2.772,1.188-4.576
l6.908-20.375h6.072l-11.396,31.244h-5.633L220.989,139.184z"/>
<path d="M273.792,162.419h-10.958l-2.641,8.01h-5.854l11.002-31.244h5.94l11.002,31.244h-5.854L273.792,162.419z M268.291,144.596
c0,0-0.704,3.081-1.319,4.841l-2.772,8.36h8.186l-2.771-8.36c-0.572-1.76-1.232-4.841-1.232-4.841H268.291z"/>
<path d="M292.445,139.184h5.677l11.838,18.042c1.188,1.805,2.597,4.841,2.597,4.841h0.088c0,0-0.308-2.992-0.308-4.841v-18.042
h5.633v31.244h-5.633l-11.839-17.999c-1.188-1.805-2.597-4.841-2.597-4.841h-0.088c0,0,0.309,2.992,0.309,4.841v17.999h-5.677
V139.184L292.445,139.184z"/>
</g>
</svg>
There seems to be something wrong with the path definition of your 1-2-1 mask. If you replace that path definition with path definition of the l-2-1 shape it works perfectly. I can't see what's wrong myself - the original path seems to be perfectly valid and draws just fine outside a mask.
Is it possible to invert the action of a clip with SVG? I'd like to show the path between the two circles rather than inside the circles:
<svg width="50%" height="50%" viewbox="0 0 985 740" xmlns="http://www.w3.org/2000/svg">
<g>
<clipPath id="re8-clip" clip-rule="nonzero">
<rect id="sa11" x="763.0" y="176.5" width="70.0" height="25.0" rx="50" ry="50" fill="ForestGreen"/>
<rect id="sa12" x="516.0" y="127.5" width="70.0" height="25.0" rx="50" ry="50" fill="ForestGreen"/>
</clipPath>
<rect id="sa11" x="763.0" y="176.5" width="70.0" height="25.0" rx="50" ry="50" fill="ForestGreen"/>
<rect id="sa12" x="516.0" y="127.5" width="70.0" height="25.0" rx="50" ry="50" fill="ForestGreen"/>
</g>
<path stroke="Black" stroke-width="1.5" fill="none" d="M 798.0 189.0 551.0 140.0" clip-path="url(#re8-clip)"/>
</svg>
Following the link in Duopixel's comment, the problem can be solved using a mask:
<svg width="50%" height="50%" viewbox="0 0 985 740" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<rect id="sa11" x="763.0" y="176.5" width="70.0" height="25.0" rx="50" ry="50" />
<rect id="sa12" x="516.0" y="127.5" width="70.0" height="25.0" rx="50" ry="50" />
</defs>
<mask id="re8-clip">
<rect id="bg" x="0" y="0" width="100%" height="100%" fill="white"/>
<use xlink:href="#sa11" fill="Black" />
<use xlink:href="#sa12" fill="Black" />
</mask>
<use xlink:href="#sa11" fill="ForestGreen" />
<use xlink:href="#sa12" fill="ForestGreen" />
<path stroke="Black" stroke-width="1.5" fill="none" d="M 798.0 189.0 551.0 140.0" mask="url(#re8-clip)"/>
</svg>
As a minor aside, does anybody know if it is possible for a mask to default to white, so the 'bg' rectangle is not necessary?