SVG and foreignObject Reflection

[marek2904]

I have a svg set of:Group("g" tag) which have css transformation attributeinside the group is the foreignObject, which contains HTML tag, in this case it's p tag,I need to have the whole group have its reflection below the original,I have a few solutions like:webkit reflectand also with the svg mask,filter, as the following:\[code\]<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox="0 0 400 80"> <defs> <linearGradient id="fadeGrad" y2="1" x2="0"> <stop offset="0.5" stop-color="white" stop-opacity="0"/> <stop offset="1" stop-color="white" stop-opacity=".5"/> </linearGradient> <mask id="fade" maskContentUnits="objectBoundingBox"> <rect width="1" height="1" fill="url(#fadeGrad)"/> </mask> </defs> <g id="web2.0-reflection"> <text id="text" font-size="40" font-weight="bold" fill="orange" font-family="sans-serif" text-rendering="geometricPrecision">Instant Web 2.0 </text> <use xlink:href="http://stackoverflow.com/questions/14480164/#text" transform="scale(1 -1)" mask="url(#fade)"/> </g></svg>\[/code\]with these solutions, each provide the reflection, color offset and gradient.but the problem is:the first solution (webkit) only reflect the element of the HTML element inside the foreignObject, in short, it does not support the SVG,the second solution is working fine, but the "use" of svg element does not clone/duplicate the foreignObject or not displaying it at least,so what can I do to implement the fine reflection for the whole group inside the "g" svg element?and btw, I manage the elements using JavaScript