Have a code:
<svg id="view-svg-problem" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id='svg-marker-start' orient='auto' markerUnits="strokeWidth" markerWidth='10' markerHeight='10' refX='9' refY='5' class="svg-path-dec">
<rect x="1" y="1" width="8" height="8" />
<text x="3" y="7.1" font-weight="bold" font-family="Arial" font-size="5.5" fill="white" stroke="transparent">S</text>
</marker>
<marker id='svg-marker-end' orient='auto' markerUnits="strokeWidth" markerWidth='10' markerHeight='10' refX='5' refY='9' class="svg-path-dec">
<rect x="1" y="1" width="8" height="8" />
<text x="3" y="7.1" font-weight="bold" font-family="Arial" font-size="5.5" fill="white" stroke="transparent">F</text>
</marker>
</defs>
<path id="view-path-svg" class="svg-path" marker-start="url(#svg-marker-start)" marker-end="url(#svg-marker-end)" d="M 655,343 Q747,317 705.5,311 Q664,305 708,292 Q752,279 713.5,254 Q675,229 711.5,212.5 Q748,196 706.5,189 Q665,182 687,157.5 Q709,133 679.5,126.5 Q650,120 663,106 T676,92"></path>
</svg>
So result looks like on the picture:
Easy to see that marker-start aligns well with the path, but marker-end doesn't want to. Is there a solution to the problem?
Related
Is it possible to vertically center align all the rects inside a tag without having to adjust the y attributes on <rect>? (see snippet for example)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="1" width="6" height="5" />
<rect x="20" y="1" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="1" width="6" height="5" />
<rect x="50" y="1" width="6" height="15" />
</g>
</svg>
<h3>desired result</h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="8" width="6" height="5" />
<rect x="20" y="6" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="8" width="6" height="5" />
<rect x="50" y="4" width="6" height="15" />
</g>
</svg>
No, it's not possible to center align <rect> elements.
But it is possible to center-align <line> elements and give them a stroke-width (note the viewBox is vertically centered around 0):
<svg viewBox="0 -19 225 38" width="100%" height="100%">
<g stroke="black">
<line x1="10" x2="16" stroke-width="5" />
<line x1="20" x2="26" stroke-width="10" />
<line x1="30" x2="36" stroke-width="20" />
<line x1="40" x2="46" stroke-width="5" />
<line x1="50" x2="56" stroke-width="15" />
</g>
</svg>
You could also achieve vertically centered <rect> elements by setting a transform: translate(0, -50%) css rule.
This approach also requires a transform-box: fill-box; (or content-box) property.
All <rect>elements get a y="50%" attribute to start at the vertical center of the svg viewBox.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" width="100%" height="100%" style="border:1px solid #ccc">
<style>
rect {
transform: translate(0, -50%);
transform-origin: center;
transform-box: fill-box;
}
</style>
<g fill="black" >
<rect x="10" y="50%" width="6" height="5" />
<rect x="20" y="50%" width="6" height="10" />
<rect x="30" y="50%" width="6" height="20" />
<rect x="40" y="50%" width="6" height="5" />
<rect x="50" y="50%" width="6" height="15" />
</g>
</svg>
Browser support for transform-box is decent. (See caniuse).
However, if you need legacy browser (e.g. ie11) support, #ccprog's answer is a more robust solution.
I have rectangles / paths as rectangles with a glow effect. That works well as long as I do not mask the inner part (i.e. hiding either the filling or the glowing inside of the rectangles). Masking part of the objects produces some ugly effect of the previously smooth glow.
So, applying the mask seems to render the previous "image" somehow. Is there a way to avoid this? If not, are there alternatives?
<svg id="button-glow" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="cyan-glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
<feFlood result="flood" flood-color="#00e4ff" flood-opacity="1"></feFlood>
<feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
<feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
<feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
<feMerge>
<feMergeNode in="blurred"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<mask id="Mask1">
<rect x="-100" y="-100" width="250" height="250" fill="white" />
<rect x="3" y="3" width="34" height="34" fill="black" />
</mask>
<mask id="Mask2">
<rect x="-100" y="-100" width="250" height="250" fill="white" />
<rect x="3" y="3" width="34" height="34" fill="black" />
</mask>
</defs>
<g transform="translate(20,20)">
<rect x="0" y="0" width="40" height="40" fill="#00e4ff"/>
<rect transform="translate(60,0)" x="0" y="0" width="40" height="40"
fill="#00e4ff" style="filter:url(#cyan-glow)"/>
<rect transform="translate(120,0)" x="0" y="0" width="40" height="40"
fill="#00e4ff" style="filter:url(#cyan-glow)" mask="url(#Mask1)"/>
<path transform="translate(0,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" fill="none"/>
<path transform="translate(60,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" style="filter:url(#cyan-glow)" fill="none"/>
<path transform="translate(120,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" style="filter:url(#cyan-glow)" fill="none" mask="url(#Mask2)"/>
</g>
</svg>
Just make the masks bigger.
You'd also be better off making the filter smaller. The huge filter size is why your SVG is very slow to render.
<svg id="button-glow" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="cyan-glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
<feFlood result="flood" flood-color="#00e4ff" flood-opacity="1"></feFlood>
<feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
<feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
<feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
<feMerge>
<feMergeNode in="blurred"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<mask id="Mask1" x="-40%" y="-40%" width="180%" height="180%">
<rect x="-100" y="-100" width="250" height="250" fill="white" />
<rect x="3" y="3" width="34" height="34" fill="black" />
</mask>
<mask id="Mask2" x="-40%" y="-40%" width="180%" height="180%">
<rect x="-100" y="-100" width="250" height="250" fill="white" />
<rect x="3" y="3" width="34" height="34" fill="black" />
</mask>
</defs>
<g transform="translate(20,20)">
<rect x="0" y="0" width="40" height="40" fill="#00e4ff"/>
<rect transform="translate(60,0)" x="0" y="0" width="40" height="40"
fill="#00e4ff" style="filter:url(#cyan-glow)"/>
<rect transform="translate(120,0)" x="0" y="0" width="40" height="40"
fill="#00e4ff" style="filter:url(#cyan-glow)" mask="url(#Mask1)"/>
<path transform="translate(0,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" fill="none"/>
<path transform="translate(60,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" style="filter:url(#cyan-glow)" fill="none"/>
<path transform="translate(120,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" style="filter:url(#cyan-glow)" fill="none" mask="url(#Mask2)"/>
</g>
</svg>
Please look at eaExperiment. I want to make a definition which takes StartArrow definition and rotates it by 180 degrees.
<?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" width="450" height="400" version="1.1">
<style type="text/css">
<![CDATA[
rect {fill:white; stroke: black; stroke-width: 1;}
text {fill: black; font-family: sans-serif; font-size: 10pt}
line {stroke:black; stroke-width:2}
]]>
</style>
<defs>
<marker orient="auto" refY="0.0" refX="0.0" id="StartArrow" style="overflow:visible;">
<path style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " />
</marker>
<use id="eaExperiment" href="#StartArrow" transform="rotate(180)" />
<marker orient="auto" refY="0.0" refX="0.0" id="EndArrow" style="overflow:visible;">
<path style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " transform="rotate(180)" />
</marker>
<svg id="Box">
<rect width="100" height="85" x="1" y="1" />
<text x="5" y="20">The box</text>
<svg x="10" y="25">
<rect width="70" height="50" x="1" y="1" />
<text x="5" y="20">Box</text>
<text x="5" y="40">Contents</text>
</svg>
</svg>
</defs>
<svg>
<svg x="10" y="120">
<rect width="100" height="50" x="1" y="1" />
<text x="5" y="20">Data</text>
<text x="5" y="40">source</text>
</svg>
<svg x="150">
<use href="#Box" y="1" />
<use href="#Box" y="100" />
<use href="#Box" y="200" />
</svg>
<svg x="300" y="120">
<rect width="100" height="50" x="1" y="1" />
<text x="5" y="20">Database</text>
<text x="5" y="40">server</text>
</svg>
<line x1="100" y1="120" x2="148" y2="40" style="marker-end:url(#EndArrow)" />
<line x1="110" y1="150" x2="147" y2="150" style="marker-end:url(#EndArrow)" />
<line x1="100" y1="170" x2="148" y2="240" style="marker-end:url(#EndArrow)" />
<line x1="254" y1="40" x2="297" y2="120" style="marker-start:url(#StartArrow); marker-end:url(#EndArrow)" />
<line x1="250" y1="150" x2="297" y2="150" style="marker-start:url(#eaExperiment); marker-end:url(#EndArrow)" />
<line x1="250" y1="240" x2="297" y2="170" style="marker-end:url(#EndArrow)" />
</svg>
</svg>
I am definitely doing it wrong, but what is the right way?
You need separate <marker> elements, but their content can be reused with <use> elements. For example like this:
<defs>
<path id="arrow" style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " />
<marker orient="auto" refY="0.0" refX="0.0" id="StartArrow" style="overflow:visible;">
<use xlink:href="#arrow" />
</marker>
<marker orient="auto" refY="0.0" refX="0.0" id="EndArrow" style="overflow:visible;">
<use xlink:href="#arrow" transform="rotate(180)" />
</marker>
</defs>
(While the use of the xlink namespace with href is deprecated and also from a practical perspective no longer needed in current browsers, I tend to still use it for the sake of other renderers, Inkscape for example.)
I have this CODEPEN and here are my issues:
I am not understanding why the gradient I applied and referenced as my mask fill like so, doesn't render as it should. It should go from fully opaque to fully transparent. For the gradient I am using: http://angrytools.com/gradient/?0_800080,100_450045&0_0,100_100&l_180:
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" />
</mask>
In addition I don't understand why if I remove the fill="blue" attribute from my use element like so:
<use xlink:href="#myText" mask="url(#myMask)" />
The text appears black as if no gradient was applied. The gradient I defined is purple..
Thanks!
if you just want to apply your gradient to your text, there is no need to use masks, because gradients support the stop-opacity property.
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0%" style="stop-color:rgb(128,0,128);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(69,0,69);stop-opacity:1" />
</linearGradient>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<use xlink:href="#myText" fill="url(#lgrad)" />
</svg>
you only need masks if you want to seperate the opacity from your fills:
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</linearGradient>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)" />
</mask>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<g mask="url(#myMask)">
<use xlink:href=" #myText" transform="translate(0,-50) " fill="red " />
<use xlink:href="#myText" transform="translate(0,0)" fill="green" />
<use xlink:href="#myText" transform="translate(0,50)" fill="blue" />
</g>
</svg>
masks turn colors into opacity information. going from black(totally transparent) to white (totally opaque)
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="50%" height="50%" fill="white" />
<rect x="50%" y="0" width="50%" height="50%" fill="#333" />
<rect x="0%" y="50%" width="50%" height="50%" fill="#aaa" />
<rect x="50%" y="50%" width="50%" height="50%" fill="white" />
<circle cx="50%" cy="50%" r="15%" fill="black" />
</mask>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="beige" />
<g mask="url(#myMask)">
<use xlink:href="#myText" transform="translate(0,-50)" fill="red" />
<use xlink:href="#myText" transform="translate(0,0)" fill="green" />
<use xlink:href="#myText" transform="translate(0,50)" fill="blue" />
</g>
</svg>
I am struggling with an svg to blur background under text on Google Chrome 36.0.1985.125 linux. The svg is like
<svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="myfilter" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<feGaussianBlur result="blurOut" in="BackgroundImage" stdDeviation="2" />
<feBlend in2="blurOut" in="SourceGraphic" mode="normal" />
</filter>
</defs>
<g enable-background="new">
<text x="10" y="100" stroke="none" fill="red" fill-opacity="1" font-size="24">BACKGROUND</text>
<text x="20" y="100" stroke="none" fill="black" fill-opacity="1" font-size="26" filter="url(#myfilter)">text</text>
</g>
</svg>
Fiddle: http://jsfiddle.net/2o2trpc1/
Thus I would like to blur "BACKGROUND" behind "text", but "text" does not appear at all. Can someone please look at this what I am doing wrong? Where can I check that the browser version supports filtering background image?
thanks a lot,
Balazs
You will have to work around the lack of BackgroundImage. There are multiple ways to do that, if your code is as simple as the fiddle you posted something like this could work:
<body>
<svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<feGaussianBlur result="blurOut" stdDeviation="2" />
</filter>
</defs>
<g>
<text x="10" y="100" stroke="none" fill="red" fill-opacity="1" font-size="24" filter="url(#blur)">BACKGROUND</text>
<text x="20" y="100" stroke="none" fill="black" fill-opacity="1" font-size="26">text</text>
</g>
</svg>
</body>
See fiddle.
Another option is to use <feImage xlink:href="#background"/> in the filter, instead of using BackgroundImage. This can bring in whatever element you want.
<body>
<svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="myfilter" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
<feImage xlink:href="#background"/>
<feGaussianBlur stdDeviation="3" />
<feBlend in="SourceGraphic" mode="normal" />
</filter>
<text id="background" x="10" y="100" stroke="none" fill="red" fill-opacity="1" font-size="24">BACKGROUND</text>
</defs>
<g>
<text x="20" y="100" stroke="none" fill="black" fill-opacity="1" font-size="26" filter="url(#myfilter)">text</text>
</g>
</svg>
</body>
See fiddle.