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?
Related
I'm trying to create a filter for only the stroke of path in SVG, but the feImage keeps getting clipped to what I assume is that bounding box (see green rectangle below in code as bounding box). I've tried setting the filter's x/y and width/height to all sorts of positions/sizes, as seems to be the prevailing advice, but nothing works. x/y just offset the feImage and width/height of greater than 100% has no effect.
I won't know in advance if the stroke or fill is solid or something else (like linearGradient.
The below demonstrates what I'm looking to do - just get the stroke of a shape (regardless of size or fill) and apply a filter to it for all modern browsers.
Notes: FF doesn't even display the left-hand feImage. Chrome clips the left and top. Edge clips all 4 sides.
<html>
<body>
<svg width="960" height="540" >
<rect width="960" height="540" stroke="#385D8A" fill="white" stroke-width="3"/>
<svg name="BoundingBox1" class="rect" x="100" y="100" overflow="visible" fill="none" stroke="#00ff00" stroke-width="1">
<path d="M0,0L121.68,0L121.68,121.68L0,121.68Z" />
</svg>
<!-- BELOW IS MODIFIED "SPEECH" SHAPE. NEED A FILTER ON THE STROKE ONLY. -->
<svg name="Speech-strokeonly" x="100" y="100" overflow="visible" fill="blue" stroke="orange" stroke-width="12" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="strokeOnly" fill="none"/>
<filter id="effs0sp9" color-interpolation-filters="sRGB" x="0" y="0">
<feImage xlink:href="#strokeOnly" />
</filter>
</defs>
<path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="effs0sp9" filter="url(#effs0sp9)" overflow="visible" />
<text y="160" stroke="black" stroke-width="0.2">this is the one that has undesirable clipping of</text>
<text y="178" stroke="black" stroke-width="0.2">of stroke in Chrome/Edge. Doesn't appear at all in FF</text>
</svg>
<!-- BELOW IS ORIGINAL WITH BOTH FILL AND STROKE -->
<svg name="BoundingBox2" x="400" y="100" overflow="visible" fill="none" stroke="green" stroke-width="1">
<path d="M0,0L121.68,0L121.68,121.68L0,121.68Z" />
</svg>
<svg name="Speech-original" x="400" y="100" overflow="visible" fill="blue" stroke="orange" stroke-width="12">
<path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="effs0sp9" />
<text y="-22" stroke="black" stroke-width="0.2">this is the original one</text>
<text y="-6" stroke="black" stroke-width="0.2">that I just want the stroke as feImage from</text>
</svg>
</svg>
</body>
</html>
Is there a way to grab the whole stroke of a shape only and use in a filter?
I have created a simple SVG, where I want to add a link inside a text.
To show that it is a link, I want it to be in the traditional blue with underline.
According to W3 this should be done by tspan with text-decoration="underline" and fill="blue", but this only creates a blue underline and the text-color is unaffected. What am I doing wrong?
Code:
<svg height="500" width="500">
<rect x="5" y="5" width="490" height="490" fill="#95B3D7"></rect>
<rect x="20" y="20" width="110" height="23" fill="#FFFFFF" stroke="#000000"></rect>
<text x="25" y="25" dominant-baseline="hanging">
Hi,
<tspan text-decoration="underline" fill="blue">
<a href="https://www.google.com">
this is a link
</a>
</tspan>
</text>
</svg>
EDIT:
Something is very strange here... the code snippet area shows the correct blue text, but when I use the code locally or in jsfiddle, it shows the text in black
I'm trying to make an SVG element fit to the bottom of the page with "Loading..." text centered regardless of the container's width. This is my current code which isn't working as the message is always in a fixed position.
<svg id="svg-bottom" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="bottom">
<rect height="40" width="100%" y="0" x="0" fill="#000000" fill-opacity="0.676460598" id="panel"></rect>
<text id="status" font-family="GothamRounded-Medium, Gotham Rounded" font-size="20" font-weight="400" fill="#FFFFFF">
<tspan x="190.97" y="16">Loading…</tspan>
</text>
</g>
I solved the above with the following:
<text font-family="GothamRounded-Medium, Gotham Rounded" font-size="20" font-weight="400" fill="#FFFFFF" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">Loading…</text>
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>
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+")")
}