Multi-line centered text in svg rendered in qt - qt

I am trying to make an svg that will be read in a QGraphicsSvgItem. I read some documentation, and it seems this is what I want:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100"
xml:space="preserve">
<rect fill="#437624" stroke="none" fill-opacity="1" x="0" y="0" width="100" height="100" />
<text y="50" transform="translate(50)">
<tspan x="0" text-anchor="middle">No</tspan>
<tspan x="0" text-anchor="middle" dy="15">Arrow</tspan>
</text>
</svg>
This creates a rectangle - and a multi-line text centered inside:
This is what it looks like in the browser.
In Qt though, when loaded in QGraphicsSvgItem, it looks like this:
I imagine that something is not supported by the Qt SVG renderer...
Even worse, setting the font size makes my Qt text completely disappear:
<text y="40" font-size="24" transform="translate(50)">
<tspan x="0" text-anchor="middle">No</tspan>
<tspan x="0" text-anchor="middle" dy="30">Arrow</tspan>
</text>
How can I make Qt get a multi-line centered text, as the first image, from the svg (what should I put in the SVG) ?
(Qt 4.7 to 5.5...)
Edit:
This worked (but still can't figure out how to do multi-line other than determining individual items)
<text x="0" y="40" font-size="24" transform="translate(50)" text-anchor="middle">No</text>
<text x="0" y="70" font-size="24" transform="translate(50)" text-anchor="middle">Arrow</text>
I find it puzzling that even copying svgs from tutorials, any svgs that contain tspan render correctly in browser but don't show in QGraphicsSvgItem - or perhaps they do but in a complete different location.

I believe the answer to your question is in the documentation for both QGraphicsSvg and the standard SVG Tiny 1.2.
Your library only support SVG Tiny and not the full SVG specification and while SVG Tiny does support "tspan", it also states this:
"positional attributes such as 'x', 'y', and 'rotate' are not available on 'tspan' in SVG Tiny 1.2."
See SVG Tiny 1.2: https://www.w3.org/TR/SVGTiny12/text.html#TSpanElement
See also Does QT support svg?

Related

Icon-font cuts off top of icon

I'm rather new to icon-fonts in CSS and now ran into the following Problem:
I have several boxes containing an Icon. Sadly the upper part of the icon get's cropped off.
I found out, that the icon-font I'm using is adding a ::after-pesudo-element which is slightly offset to the original element and that causes the part that is cut off. (See Screenshots)
(The Icon-Font I'm using is http://linea.io)
I inverstigated furhter and realized that this only occured due to the fact that I have the following CSS on the Icon:
-webkit-background-clip: text;
color: transparent;
If I remove this, the Icon-Color will become black and be shown whole.
I don't know if this is due to a bug in my CSS since I couldn't find anything on the web.
But I removed almost all of my personal CSS and the bug still occured.
Those don't look like CSS fonts, they're simply SVGs. That off set error you see tends to happen when the viewBox, height, or width of the SVG isn't correct. If you still need to use them you should inline them, just copy and paste the SVG code.
Taken from the link you posted:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
<circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="32" cy="22" r="6"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M53,22.735C52.948,10.73,43.599,1,32,1
s-21,9.73-21,21.735C11,38.271,31.965,63,31.965,63S53.069,38.271,53,22.735z"/>
</g>
</svg>
If you prefer to use a real CSS icon library, I'd recommend using something a bit a more tested such as Font Awesome. But these are a dime a dozen and if you Google you could potentially find something you like.

Svg with parameters that loads in Qt

Basic needs:
I am working on a Qt application that replaces colors in an svg.
A nice implementation is to parse the svg xml, and replace the colors as found with a good color match.
Unfortunately, the application must run on a platform with very limited speed and memory, and loading the svg into the QSvgRenderer from an xml (or text string) is extremely slow.
So - my current implementation is to string replace the occurrences of hex known colors in the QByteArray loaded by the renderer.
A big limitation - if I want to replace a fill color with a pen color, and they match, I end up with a broken blob.
A second limitation: I can only have 2 defined colors, a fill and a pen.
What I would like:
I want to be able to create a "parameterized" svg, where I can replace "color1", "color2", "color3" defined at the top, with whatever colors the user chooses.
Note - the svg has to be loaded by the QSvgRenderer, so the parameter values can't be in an outside html or js.
The svg must be self-contained... with no outside caller requirement.
But I can replace in code the parameter value before load.
I just want to be able to replace parameters in a single location, instead of actual values inside the xml everywhere they occur.
What I have tried:
I have read in the svg documentation that it is possible to create parameterized values. This is from an example, as much as I understand it...
w3.org example
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 110 40" width="100%" height="100%">
<title>Reusable Button</title>
<desc>Takes parameters from parent document's embedding element.</desc>
<defs>
<ref id="paramFill" param="color" default="blue"/>
<ref id="paramText" param="text-label">button</ref>
<ref id="paramStroke" param="outline" default="navy"/>
</defs>
<g>
<rect id="button_rect" x="5" y="5" width="100" height="30" rx="15" ry="15" fill="url(#paramFill)" stroke="url(#paramStroke)" />
<text id="button_label" x="55" y="30" text-anchor="middle" font-size="25" fill="black" font-family="Verdana">
<tref xlink:href="#paramText" />
</text>
</g>
</svg>
Unfortunately Qt doesn't load it and browsers show as error.
Second example: from S.O: Define color in SVG
<?xml version="1.0"?>
<svg width="704" height="702" xmlns="http://www.w3.org/2000/svg">
<style>
.myfill { fill:red }
</style>
<g fill="blue">
<rect x="0" y="0" width="704" height="702" class="myfill" />
</g>
</svg>
This loads in browser correctly as red, but Qt loads it with blue - so clearly it does not support the parameter value.
Is there any possible version of svg that uses parameters, that can be supported by Qt ?
Can somebody please help fix either of my examples or give a correct / better example ?
Thank you.
Qt version: 4.8
A long, long time ago, when some SVG renderers did not support style sheets, I solved this with XML entities:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY red "#ff0000">
]>
<svg width="704" height="702" xmlns="http://www.w3.org/2000/svg">
<g fill="blue">
<rect x="0" y="0" width="704" height="702" fill="&red;" />
</g>
</svg>

SVG text clippath in Firefox

I am using a text clippath to create an SVG displaying text so that I can animate the background to come in for a fun text reveal effect.
It works great in Chrome and Safari but in Firefox there are issues with the clippath.
<svg viewBox="0 0 600 150">
<!-- Clippath with text -->
<clippath id="cp-text">
<text text-anchor="left"
x="0"
y="50%"
dy=".35em"
class="text--line"
>
hello
</text>
</clippath>
<!-- Group with clippath for text-->
<g clip-path="url(#cp-text)" class="colortext">
<!-- Animated shapes inside text -->
<polyline class="anim-shape" points="559.91 153.84 526.17 -11.62 478.32 -11.62 512.05 150.84 559.91 153.84" style="fill: #4c4870"/>
<polyline class="anim-shape" points="599.75 149.75 599.92 -0.62 528.07 -0.62 558.75 150.75 599.75 149.75" style="fill: #93d2c4"/>
<polygon class="anim-shape" points="479.07 -11.62 395.78 -11.62 429.52 153.84 512.8 153.84 479.07 -11.62" style="fill: #f89c2c"/>
</g>
</svg>
I'm using CSS transforms to animate the polgyon shapes on load (scale and translate).
See codepen demo here: https://codepen.io/njpatten/pen/zwEeev
I've tried updating the polgyons inside the svg but it seems to be a problem with the clippath text rendering being delayed.
Any idea what might be the problem in Firefox? Thanks in advance for any suggestions or help!
It seems Firefox requires something to render beside the text mask you have created, while the animated shapes are with scale of 0,1 , it gets some problems.
I added this
<rect x="0" y="0" width="100%" height="100%" fill="transparent" />
just before first polygon and seems it now works similar to Chrome.
I think you can work with width and height if you don't want full width and height.
Hope it helps

SVG elements that worked in past versions of iPython notebook dont seem to work any more

A markdown cell with the following snippet would work correctly in earlier versions (I wish I had kept track of all the version numbers). I opened an old notebook recently and this no longer seems to work. Any suggestions on what is possibly wrong?
Here is the stylized relevant extract: If I put this is in a markdown cell, I am hoping to get a rectangle embedded in the text.
I want to draw a rectangle
<svg width="400" height="150" >
<g id="fig1">
<text x="150" y="10" font-family="Verdana" font-size="10" fill="blue" > width </text>
<rect x="50" y="20" width="100" height="50" style="fill:rgb(255,255,0);stroke-width:3;stroke:rgb(0,0,0)" />
<text x="2" y="65" font-family="Verdana" font-size="10" fill="blue" > height </text>
</g>
</svg>

Make sun rays figure using css3

Please I want to know how to make something similar to sunrise using css3.
Below is a sample.
This article (though it talks about animating the rays also) decribes making a suburst pattern http://designrshub.com/2013/01/css3-keyframe-animations.html.
But, I would use an svg image. See Is Starburst effect doable in CSS3?
the SVG:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512px" height="512px" viewBox="-256 -256 512 512"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Burst</title>
<defs>
<g id="burst">
<g id="quad">
<path id="ray" d="M0,0 -69,-500 69,-500 z" />
<use xlink:href="#ray" transform="rotate(30)"/>
<use xlink:href="#ray" transform="rotate(60)"/>
<use xlink:href="#ray" transform="rotate(90)"/>
</g>
<use xlink:href="#quad" transform="rotate(120)"/>
<use xlink:href="#quad" transform="rotate(240)"/>
</g>
<radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="white" stop-opacity="0.65"/>
<stop offset="100%" stop-color="black" stop-opacity="0.65"/>
</radialGradient>
<!-- a circle mask -->
<mask id="m"><circle r="256" fill="white"/></mask>
</defs>
<!-- added a mask and scaled it to a different aspect ratio below. scale(x,y) -->
<g mask="url(#m)" transform="scale(1, 0.75)">
<use xlink:href="#burst" fill="lightslateblue"/>
<use xlink:href="#burst" fill="darkslateblue" transform="rotate(15)"/>
<circle r="360px" fill="url(#grad)" />
</g>
</svg>
Yes, it is possible.
Working demo: https://codepen.io/lethargic/full/RRYdxX
I've written a vanilla CSS version as well as a Sass mixin at github.com/pestbarn/starburst.css.
Cross-browser?
As far as I can tell, yes. Needs testing in IE versions below 11, but seems well supported otherwise (full browser support as of 2019).
Animatable?
Yep, like you would animate any other elements.
Caveats?
Alas, there is. Using colors that are far from another on the color wheel will create jagged edges. I'd recommend using colors that are close to one another.
Also, since the effect is created using pseudo elements, you will in some cases need to explicitly set the element's height and width.
Using the Sass mixin, you can simply do the following:
#include starburst(both, 11, #184256, #194052);
This will create a starburst/sunburst effect with the colors you asked for, with the bursts being 11 degrees apart (smaller number = tighter burst).

Resources