The following code infact wraps text on a rectangle.
But when I want to drag the rectangle, i also want the text to be dragged simultaneously,i.e, the text must be bound to the rectangle on drag and drop.
Please help me.
<svg xmlns="http://www.w3.org/2000/svg">
<g id='Propositions'>
<rect id='Proposition1' x='50' y='50' width='100' height='30' style='fill:#8FBC8F; '/>
<text x="55" y="72" font-family="Verdana" font-size="14" fill="black" > Proposition1</text>
</g>
</svg>
Thanks in advance..
Drag the <g> element(parentNode), rather than the rect. This, then will include the text in the drag/drop event.
e.g.
<g id='Propositions'>
<rect id='Proposition1' onmousemove=dragMe(evt) x='50' y='50' width='100' height='30' style='fill:#8FBC8F; '/>
<text pointer-events=all x="55" y="72" font-family="Verdana" font-size="14" fill="black" > Proposition1</text>
</g>
function dragMe(evt)
{
myG=evt.target.parentNode
myG.setAttribute("transform", "translate("+transX+" "+transY+")")
}
Related
I am trying to put bold fonts on mouseenter event and normal font on leave. I am able to do it concatenating two event handlers on mouseevent .. on mouseleave. But following the documentation's example, it looks like I can do better using on mouseenter toggle .. until mouseleave, but It seems to toggle the font weight when mouse leaves, not whe it enters. Below an example:
<script src="https://unpkg.com/hyperscript.org#0.9.5"></script>
<svg width="1632pt" height="470pt"
viewBox="0.00 0.00 1632.30 470.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 466)">
<ellipse fill="#ffffff" fill-opacity="0.811765" stroke="black" cx="150" cy="-300" rx="101.28" ry="18"/>
<text text-anchor="middle"
x="150"
y="-296.3"
font-family="Times,serif"
font-size="14.00"
font-weight="normal"
_="on mouseenter toggle [#font-weight=bold] until mouseleave">
Works Wrong
</text>
<ellipse fill="#ffffff" fill-opacity="0.811765" stroke="black" cx="500" cy="-300" rx="101.28" ry="18"/>
<text text-anchor="middle"
x="500"
y="-296.3"
font-family="Times,serif"
font-size="14.00"
font-weight="normal"
_="on mouseenter set #font-weight to 'bold' on mouseleave set #font-weight to 'normal'">
Works Ok
</text>
</g>
</svg>
Am I understanding something wrong about toggling?
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 a SVG group element such as this:
<g transform="translate(290 110)">
<rect x="0" y="0" rx="4" ry="4" width="68" height="68" style="fill:none;stroke:black;stroke-width:1;" />
</g>
I would like to add some text that is aligned with the inside bottom-left border of the rect. Sort of like the left and bottom CSS attributes in HTML.
How do I accomplish this?
[edit]
One problem with trying to calculate the offsets myself is that I can't mix and match px and em measurements in the same calculation. For instance, the container is 68x68px, but I want to offset the text 1em from the bottom. Also, the distance from one tspan to the next should be based on something other than pixels.
To align multuiple rows of text, just use <tspan> and the dy attribute.
<svg width="400" height="400">
<g transform="translate(290 110)">
<rect x="0" y="0" rx="4" ry="4" width="68" height="68" style="fill:none;stroke:black;stroke-width:1;" />
<text y="68">
<tspan>First line</tspan>
<tspan x="0" dy="-1em">Second line</tspan>
<tspan x="0" dy="-1em">Third line</tspan>
</text>
</g>
</svg>
I've set up a minimalist example of what I have here. I need to position the text element at the very top of the SVG. However if you inspect the text element, you'll see that it actually starts somewhere outside the SVG (like -3px on Chrome, -4px on FF) -- see below screenshot. I'm building something which needs to be pixel-perfect, so I need to get the text to start exactly where the SVG starts. As you can see, the rect starts where it's supposed to.
Since SO won't let me post links to jsfiddle without code inside the post, here's the code:
<svg width="100%" height="360" style="background-color: rgb(0, 249, 253);margin-top: 50px;">
<rect y1="0" y2="100" x="0" width="100" height="100"></rect>
<text x="100" y="0" dominant-baseline="hanging">2022</text>
</svg>
Any idea why this is happening?
According to the SVG specification, a dominant baseline of hanging is only meaningful for Indic scripts like Devanagari. If you want the top edge of the text box to align with a particular Y coordinate, then use text-before-edge instead:
<svg width="300" height="55" viewBox="0 0 300 55">
<rect x="20" y="5" width="30" height="30" fill="#f00"/>
<text x="50" y="5" dominant-baseline="hanging">8888</text>
<text x="35" y="50" text-anchor="middle">hanging</text>
<rect x="220" y="5" width="30" height="30" fill="#f00"/>
<text x="250" y="5" dominant-baseline="text-before-edge">8888</text>
<text x="235" y="50" text-anchor="middle">text-before-edge</text>
</svg>
I'd like to place a single character, perfectly centered, inside this circle:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100" height="100">
<g>
<circle style="fill:#eeeeee" cx="50" cy="50" r="50">
</circle>
<text>C</text>
</g>
</svg>
Ideally, the solution works for any single ASCII character.
Thanks for the help!
Use a combination of text-anchor="middle" to centre the text horizontally, and dominant-baseline="central" to centre it vertically.
To simplify things, I've added a transform attribute to your <g> element to move the origin to the middle of your canvas.
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<g transform="translate(50,50)">
<circle style="fill:#eeeeee" r="50" />
<text text-anchor="middle" dominant-baseline="central">C</text>
</g>
</svg>