SVG how to set max width for group - 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>

Related

SVG tooltip on background element

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>

SVG path mask not working

According to example of this tutorials I want to mask my icon (black and white) instead of text in this tutorial. but right side of icon is still dark. how can I make left side of my icon black stroke and right side of icon goes white stroke?
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="41px" height="50px" viewbox="-3 -3 40 48">
<defs>
<mask id="myMask" maskUnits="userSpaceOnUse"
x="0" y="0" width="18" height="50">
<rect x="0" y="0" width="15" height="50" fill="white"/>
</mask>
<path id="fire-icon" d="m 25.55134,17.573125 c 0.647761,1.273107 1.136636,2.596633 1.344412,4.021007 0.21999,1.47479 0.13444,2.924371 -0.342217,4.348739 -0.427768,1.273111 -1.124413,2.382358 -2.004391,3.378155 -0.977758,1.096637 -2.114394,1.991591 -3.348802,2.773105 -0.183328,0.113445 -0.366658,0.226895 -0.57443,0.365546 1.429964,-3.214282 1.686623,-5.760501 0.366659,-8.924365 -0.904421,-2.155462 -2.395495,-3.743696 -3.519909,-4.4874 0,0 0.305545,3.655466 -2.248829,5.9874 0.391098,-1.184876 -0.672208,-2.31933 -0.672208,-2.31933 -0.31777,1.386549 -0.8922,1.651268 -1.662178,2.836135 -0.366658,0.567227 -0.708873,1.159666 -0.941085,1.802516 -0.342214,0.970596 -0.403325,1.953785 -0.207778,2.96219 0.134444,0.668067 0.342218,1.310925 0.63554,1.941174 0.02446,0.05042 0.04889,0.113449 0.08556,0.226893 C 12.156129,32.308418 11.899468,32.169763 11.655035,31.993294 10.921719,31.463881 10.163961,30.959677 9.467313,30.37985 8.5628918,29.623547 7.8173555,28.715982 7.3284794,27.619344 7.0351536,26.951277 6.8640469,26.245395 6.8151593,25.514301 c -0.097775,-1.65126 0.2933257,-3.201685 0.9899743,-4.676472 0.5010979,-1.071427 0.9777525,-2.142852 1.4544067,-3.226887 0.1344411,-0.31513 0.2199942,-0.66807 0.3055478,-1.008411 0.085554,-0.327726 0.1344412,-0.668063 0.1955503,-1.033609 0.9777516,0.46639 1.4544056,2.521009 0.9044216,3.857144 0.02444,0 0.03666,0 0.06111,0 0.232216,-0.302517 0.464431,-0.605039 0.696652,-0.907563 0.977751,-1.323526 1.869945,-2.684872 2.566595,-4.184872 0.623316,-1.34874 1.099973,-2.735295 1.185527,-4.247902 0.02445,-0.5294123 -0.02445,-1.0714263 -0.03667,-1.6008383 0.01223,0 0.02445,0 0.03667,0 0.65998,0.315125 1.307741,0.680673 1.882172,1.134457 1.014423,0.8193243 1.857728,1.7899163 2.566601,2.8991563 0.892198,1.411766 1.515512,2.936975 1.955505,4.550418 0.01223,0.06302 0.03667,0.126055 0.06111,0.214286 1.344407,-1.210083 0.513317,-4.172266 0.501096,-4.222688 -0.02445,-0.0252 2.261053,2.029411 3.409911,4.512605 z"
fill="none" stroke="#303233" stroke-width="1.3" />
</defs>
<!-- Draw black rectangle in the background -->
<rect x="18" y="0" width="15" height="50" fill="#000" />
<!-- Draw the text string twice. First, the white text without mask.
Second, the black text with the mask applied-->
<use xlink:href="#fire-icon" stroke="white"/>
<use xlink:href="#fire-icon" stroke="black" mask="url(#myMask)"/>
</svg>

There's no mask issue. The stroke on the path overrides the stroke on the use element, so in the question there are two grey (#303233) stroked paths. Removing the path stroke atribute allows the use to set one.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="41px" height="50px" viewbox="-3 -3 40 48">
<defs>
<mask id="myMask" maskUnits="userSpaceOnUse"
x="0" y="0" width="18" height="50">
<rect x="0" y="0" width="15" height="50" fill="white"/>
</mask>
<path id="fire-icon" d="m 25.55134,17.573125 c 0.647761,1.273107 1.136636,2.596633 1.344412,4.021007 0.21999,1.47479 0.13444,2.924371 -0.342217,4.348739 -0.427768,1.273111 -1.124413,2.382358 -2.004391,3.378155 -0.977758,1.096637 -2.114394,1.991591 -3.348802,2.773105 -0.183328,0.113445 -0.366658,0.226895 -0.57443,0.365546 1.429964,-3.214282 1.686623,-5.760501 0.366659,-8.924365 -0.904421,-2.155462 -2.395495,-3.743696 -3.519909,-4.4874 0,0 0.305545,3.655466 -2.248829,5.9874 0.391098,-1.184876 -0.672208,-2.31933 -0.672208,-2.31933 -0.31777,1.386549 -0.8922,1.651268 -1.662178,2.836135 -0.366658,0.567227 -0.708873,1.159666 -0.941085,1.802516 -0.342214,0.970596 -0.403325,1.953785 -0.207778,2.96219 0.134444,0.668067 0.342218,1.310925 0.63554,1.941174 0.02446,0.05042 0.04889,0.113449 0.08556,0.226893 C 12.156129,32.308418 11.899468,32.169763 11.655035,31.993294 10.921719,31.463881 10.163961,30.959677 9.467313,30.37985 8.5628918,29.623547 7.8173555,28.715982 7.3284794,27.619344 7.0351536,26.951277 6.8640469,26.245395 6.8151593,25.514301 c -0.097775,-1.65126 0.2933257,-3.201685 0.9899743,-4.676472 0.5010979,-1.071427 0.9777525,-2.142852 1.4544067,-3.226887 0.1344411,-0.31513 0.2199942,-0.66807 0.3055478,-1.008411 0.085554,-0.327726 0.1344412,-0.668063 0.1955503,-1.033609 0.9777516,0.46639 1.4544056,2.521009 0.9044216,3.857144 0.02444,0 0.03666,0 0.06111,0 0.232216,-0.302517 0.464431,-0.605039 0.696652,-0.907563 0.977751,-1.323526 1.869945,-2.684872 2.566595,-4.184872 0.623316,-1.34874 1.099973,-2.735295 1.185527,-4.247902 0.02445,-0.5294123 -0.02445,-1.0714263 -0.03667,-1.6008383 0.01223,0 0.02445,0 0.03667,0 0.65998,0.315125 1.307741,0.680673 1.882172,1.134457 1.014423,0.8193243 1.857728,1.7899163 2.566601,2.8991563 0.892198,1.411766 1.515512,2.936975 1.955505,4.550418 0.01223,0.06302 0.03667,0.126055 0.06111,0.214286 1.344407,-1.210083 0.513317,-4.172266 0.501096,-4.222688 -0.02445,-0.0252 2.261053,2.029411 3.409911,4.512605 z"
fill="none" stroke-width="1.3" />
</defs>
<!-- Draw black rectangle in the background -->
<rect x="18" y="0" width="15" height="50" fill="#000" />
<!-- Draw the text string twice. First, the white text without mask.
Second, the black text with the mask applied-->
<use xlink:href="#fire-icon" stroke="white"/>
<use xlink:href="#fire-icon" stroke="black" mask="url(#myMask)"/>
</svg>

svg mask and bounding box

I need to apply mask to a different objects.
Mask should cover whole object (visible part of it). I put the mask inside one specific place, at the top of the page, changed maskContentUnits to objectBoundingBox, so it worked perfectly.
But then a problem appeared.
I made a fiddle to illustrate the problem: http://jsfiddle.net/8qdt7vjr/1/
<body>
<svg width="0" height="0">
<defs>
<mask id="mask1" maskContentUnits="objectBoundingBox">
<ellipse cx=".5" cy=".5" rx=".5" ry=".5" fill="white" />
</mask>
</defs>
</svg>
<svg class="svg" width="200" height="150" overflow="visible">
<rect x="-50" y="-50" width="350" height="250" fill="none" stroke="green" stroke-width="2" />
<svg id="zzz" x="0" y="0" width="100%" height="100%" overflow="visible" mask="url(#mask1)">
<rect x="-50" y="-50" width="350" height="250" fill="blue" fill-opacity=".3" />
</svg>
<rect width="100%" height="100%" fill="red" fill-opacity=".1" stroke="red" stroke-width="1" />
</svg>
</body>
In this fiddle i want to apply mask to svg element with id="zzz". But inside this element there is a rect element, that increases zzz's bounding box. In the fiddle it is rect, but in my project it is an image tag. zzz has overflow set to hidden (in the fiddle I changed it to visible, so it is easier to see the problem), so I have a specific portion of image visible inside zzz.
The real problem is that zzz's inner content increases zzz's bounding box.
In the fiddle I want ellipse mask to be inside red rectangle (visible zzz's area), but it is inside green rectangle (zzz's bounding box) instead.
So the main question is: is there any way to achieve this goal? Mask will be used by many elements with different sizes and content and I do not want to clone it.
Is there any way to do this without cloning mask inside each element?
Is there any way to reduce bounding box to visible area?
Is there any way to show a part of an image without expanding parent's bounding box?
Is there any other way to do this?

Is it something like this you try to achieve?
<body>
<svg width="0" height="0">
<defs>
<mask id="mask1" maskContentUnits="userSpaceOnUse">
<ellipse cx="100" cy="75" rx="100" ry="75" fill="white" />
</mask>
</defs>
</svg>
<svg class="svg" width="200" height="150" overflow="visible">
<rect x="-50" y="-50" width="350" height="250" fill="none" stroke="green" stroke-width="2" />
<svg id="zzz" x="0" y="0" width="100%" height="100%" overflow="visible" mask="url(#mask1)">
<rect x="-50" y="-50" width="350" height="250" fill="blue" fill-opacity=".3" />
</svg>
<rect width="100%" height="100%" fill="red" fill-opacity=".1" stroke="red" stroke-width="1" />
</svg>
</body>
Maybe using userSpaceOnUse instead of objectBoundingBox can help achieve what you want... In combination with nested svg elements you can define the userspace to use and with that the part the mask is applied to...

Cut off half of the SVG's text element

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>

How to size an SVG

I am trying to create an SVG sprite.
I have set the SVG image to be 100px wide, 50px height, then offset the second by 50.
How can I set the size of the actual icon? Currently, the icon is huge and not 50px.
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100px"
height="50px">
<defs>
<g id="arrow">
<path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
</g>
</defs>
<use x="0" y="0" style="fill: #333" xlink:href="#arrow" />
<use x="50" y="0" style="fill: #999" xlink:href="#arrow" />
</svg>
This is what I see:

DO NOT USE TRANSFORM FOR SCALING
What you are missing is a defined viewBox.
If you do not define a viewBox the viewBox is the same size as the height and width that you defined.
So when you draw a path and some of its point are above 370 then they will be outside its container. Since your defined size is 100 width by 50 height. Any point with values higher then the size will not be drawn.
when you define a viewBox you can change the size without affecting what is drawn or not.
This is the article i allways use when i forget how to properly scale svgs: https://css-tricks.com/scale-svg/
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100px"
height="50px"
viewBox="0 0 500 500">
<defs>
<g id="arrow">
<path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
</g>
</defs>
<use x="0" y="0" style="fill: #333" xlink:href="#arrow" />
<use x="50" y="0" style="fill: #999" xlink:href="#arrow" />
</svg>

Like this? I just added transform="scale(0.1)" attribute to the g tag to make it 10x smaller
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100px"
height="50px">
<defs>
<g id="arrow" transform="scale(0.1)">
<path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
</g>
</defs>
<use x="0" y="0" style="fill: #333" xlink:href="#arrow" />
<use x="50" y="0" style="fill: #999" xlink:href="#arrow" />
</svg>

Resources