How can I make this
to look like this
So I want to halve the text element. I don't want to hide half of the text outside of SVG. Hiding it outside of g would be ok, but haven't found solution.
<svg width="500" height="500">
<g transform="translate(50,50)">
<rect width="80" height="50" style="fill:rgb(0,0,255);"/>
<text font-size="40" x="0" y="15" fill="black">SVG</text>
</g>
</svg>
JSFIDDLE:
http://jsfiddle.net/64nkLcdy/
Use the clip-path property :
<svg width="500" height="500">
<defs>
<clipPath id="myClip">
<rect width="80" height="50" />
</clipPath>
</defs>
<g transform="translate(50,50)">
<rect width="80" height="50" style="fill:rgb(0,0,255);" />
<text font-size="40" x="0" y="15" fill="black" clip-path="url(#myClip)">SVG</text>
</g>
</svg>
Use an <svg> element rather than a <g> as the svg element will clip its contents by default. The overflow property controls clipping i.e overflow="visible" doesn't clip but overflow="hidden" does.
<svg width="500" height="500">
<svg transform="translate(50,50)" width="80" height="50" overflow="hidden">
<rect width="80" height="50" style="fill:rgb(0,0,255);"/>
<text font-size="40" x="0" y="15" fill="black">SVG</text>
</svg>
</svg>
Related
I need to display a tooltip message (defined with tag) over a rect element that's partially overlapped by above another (transparent) rect:
https://jsfiddle.net/nkeLcxga/1/
<svg width="300" height="300">
<rect x="100" y="100" width="100" height="100" stroke="black" fill="green">
<title>I'm a tootip</title>
</rect>
<rect x="150" y="150" width="150" height="150" stroke="red" stroke-width="3" fill="transparent"></rect>
</svg>
Is there a way to display tooltip on mouseover event even on lower-right green corner although it is overlapped by another element?
Setting fill="none" almost fixes it and you shouldn't ever use fill="transparent".
To prevent the tooltip from being absent when the mouse is over the thin red line I've added pointer-events="none" too.
<svg width="300" height="300">
<rect x="100" y="100" width="100" height="100" stroke="black" fill="green">
<title>I'm a tootip</title>
</rect>
<rect x="150" y="150" width="150" height="150" stroke="red" stroke-width="3" fill="none" peointer-events="none"></rect>
</svg>
The following code does not work:
<svg>
<defs>
<clipPath id="test">
<g>
<rect x="0" y="0" width="10" height="10"></rect>
</g>
</clipPath>
</defs>
<rect x="0" y="0" width="100" height="100" clip-path="url(#test)"></rect>
</svg>
But this does work:
<svg>
<defs>
<clipPath id="test">
<rect x="0" y="0" width="10" height="10"></rect>
</clipPath>
</defs>
<rect x="0" y="0" width="100" height="100" clip-path="url(#test)"></rect>
</svg>
In my project, I have some paths in the group tag and I want to reuse the group as a clipPath target and show the path at the same time. For example:
<svg>
<defs>
<g id="group">
<path d="..."></path>
<path d="..."></path>
<path d="..."></path>
<path d="..."></path>
</g>
<clipPath id="test">
<use xlink:href="#group" fill="#000"></use>
</clipPath>
</defs>
<!-- show the stroke of the group -->
<use xlink:href="#group" stroke="#000"></use>
<!-- at same time, clip the rect to make some animation as the background -->
<rect x="0" y="0" width="100" height="100" clip-path="url(#test)"></rect>
</svg>
Because the SVG specification says so
Content model:
Any number of the following elements, in any order:
descriptive elements
animation elements
shape elements
‘text’
‘use’
Unfortunately <g> elements are not in that list.
Firefox used to support clipping <g> elements a long time ago till we noticed that we weren't a) acting per the specification above and b) compatible with other implementations so we restricted our clipPath implementation to be consistent. So if you got Chrome and Safari on board for a specification change we'd likely be OK with that.
Note that you can work around this by clipping a <use> element that points to a <g> element.
I use the bellow SVG code to build a horizontal bar chart. It is OK, but I need also two inline labels before and after the chart. I know how to add them with HTML and CSS, but I want to solve this only with pure SVG. How to do this?
<svg class="chart" width="300px" height="40">
<g transform="translate(0,0)">
<rect width="82%" height="22" fill="lightskyblue"></rect>
<rect width="100%" height="22" style="fill:none; stroke-width:1; stroke:gray;"></rect>
<text y="30" dx="0.25em" dy=".35em">0</text>
<text x="20%" y="10" dy=".35em" fill="red">|</text>
<text x="20%" y="30" dx="-0.25em" dy=".35em" fill="red">13</text>
<text x="100%" y="30" dx="-1.25em" dy=".35em">63</text>
</g>
</svg>
This is what I have now:
And this is what I want:
In order to make it work I'm using your code as a nested svg inside a larger svg element. Please observe I'm using a viewBox attribute where the x component has a negative value (-50) making space for the text.
svg{border:solid;}
<svg class="chart" width="300px" viewBox="-50 0 400 40">
<text y="20" x="-45">TXT</text>
<text x="345" y="20" text-anchor="end">TXT</text>
<svg viewBox="0 0 300 40" width="300">
<rect width="82%" height="22" fill="lightskyblue"></rect>
<rect width="100%" height="22" style="fill:none; stroke-width:1; stroke:gray;"></rect>
<text y="30" dx="0.25em" dy=".35em">0</text>
<text x="20%" y="10" dy=".35em" fill="red">|</text>
<text x="20%" y="30" dx="-0.25em" dy=".35em" fill="red">13</text>
<text x="100%" y="30" dx="-1.25em" dy=".35em">63</text>
</svg>
</svg>
I must tell you that I wouldn't percentages for the position and size of the rects. I would have done it using user units (without unit identifier) and I wouldn't have needed to wrap it in another svg element.
UPDATE
the OP is commenting
Can you give another example, without percentages for the position and size of the rects and without wrapping it in another svg element
svg{border:solid}
<svg class="chart" width="300px" viewBox="-50 0 400 40">
<text y="20" x="-45">TXT</text>
<text x="345" y="20" text-anchor="end">TXT</text>
<rect width="246" height="22" fill="lightskyblue"></rect>
<rect width="300" height="22" style="fill:none; stroke-width:1; stroke:gray;"></rect>
<text y="30" dx="0.25em" dy=".35em">0</text>
<text x="60" y="10" dy=".35em" fill="red">|</text>
<text x="60" y="30" dx="-0.25em" dy=".35em" fill="red">13</text>
<text x="300" y="30" dx="-1.25em" dy=".35em">63</text>
<svg>
I have some SVG elements grouped together in a <g> element (exactly the barcode 1D, PHP generates a barcode).
<g
style="fill:#000000;stroke:none"
id="barcode1D"
transform="matrix(1.2083333,0,0,0.8247805,62.027778,573.54235)">
<rect
x="0"
y="0"
width="4"
height="30"
id="xyz" />
....
<rect
x="224"
y="0"
width="0"
height="30"
id="xyzn" /> </g>
The barcode is generated in various widths, lengths. How can I set the width permanently ?
Based on this example, I am asking for a hint. Thank you for your help in advance.
SVG g element does not have width and height attributes. Therefore, you can not set height and width on it.
You should use a foreignObject with a svg inside of it to do so.
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<foreignObject id="G" width="300" height="200">
<svg>
<!-- Barcode here -->
<rect fill="black" stroke-width="2" height="112" width="84" y="55" x="55" stroke="#000000"/>
<circle fill="#FF0000" stroke="#000000" stroke-width="5" cx="155" cy="65" id="svg_7" r="50"/>
</svg>
</foreignObject>
</svg>
I have this code:
<g pointer-events="default">
<g>
<g x="0" y="0" width="145" height="47" regroup="false">
<text x="0" y="0">
<tspan x="0" y="0">some text</tspan>
</text>
</g>
<g x="0" y="0" width="80" height="60" regroup="false">
<rect x="0" y="0" width="80" height="60" fill="white" />
</g>
</g>
</g>
There is one css rule box-sizing: border-box;which is apply to all elements.
It produce that:
The grid is coming from a sliding element from the first <g>.
I don't understand why the text element and the rect are not displayed at the same y.
Does anyone have any idea?