Is there any way i can draw vertical multiple lines in svg? - html

I want to get something like this
i have tried using strokeDashoffset and strokeDasharray but i still can't get it, ik that i can draw multiple lines but i will have a script that will have to fill these lines
any ideas how can i make them? thanks
i don't know if you need it but here is what i tried:
<svg id="edilRW8EQ5h1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 54 12.5" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
<path strokeDasharray="10, 10" strokeDashoffset="10" pathLength="500" d="M0,6.25h54v2.134695h-54L0,6.25" fill="white" stroke="#3f5787" stroke-width="0.5"/>
</svg>

This looks a lot like a <pattern>. Here I use the pattern on a <rect> and at the same time the <rect> also has a mask. The mask has a gradient that controls the the whiteness.
It looks a bit like a meter. The "value" of the meter can now be controlled by the value of the two stop elements in the gradient (here 76%).
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 8">
<defs>
<pattern id="p1" viewBox="0 0 6 10" width="5%" height="100%">
<path transform="translate(4 0) rotate(10)" d="M 0 0 V 10"
stroke-width="4" stroke="white" stroke-linecap="round"/>
</pattern>
<linearGradient id="g1" gradientTransform="rotate(1.5)">
<stop offset="0" stop-opacity=".2" stop-color="white" />
<stop offset="76%" stop-opacity="1" stop-color="white" />
<stop offset="76%" stop-opacity=".2" stop-color="white" />
<stop offset="100%" stop-opacity=".2" stop-color="white" />
</linearGradient>
<mask id="m1">
<rect width="50" height="8" fill="url(#g1)"/>
</mask>
</defs>
<rect width="50" height="8" fill="black"/>
<rect width="50" height="8" fill="url(#p1)" mask="url(#m1)"/>
</svg>

Related

Add SVG logo on top of SVG background

I am wanting to add an SVG logo that I have (I have the SVG code also) on top of a rectangle with a radial background colour that also contains some title text, however I'm unsure of how to do this.
For context, I am using React-PDF, so the syntax is slightly different.
Currently I have
<Svg width="555" height="80" viewBox="0 0 555 80">
<Defs>
<RadialGradient id="header-rectangle" cx="0" cy="0" fr="1">
<Stop stopColor="#A01858"/>
<Stop offset="1" stopColor="#87005F"/>
</RadialGradient>
</Defs>
<Rect width="555" height="80" rx="8" fill="url(#header-rectangle)"/>
<Text style={styles.svg} x={`${555-20}px`} y="50%" textAnchor="end" dominantBaseline="middle">Some title here</Text>
</Svg>
I then also have my SVG logo (shortened here for conciseness):
<Svg width="80" height="52" viewBox="0 0 80 52" fill="none">
<Path d="M0 47.6941V37.8042C0... fill="green"/>
...
</Svg
I am wondering how I can add the logo to the main piece...
I have attempted to place the full <Svg>/*logo*/</Svg> to the main section, but this produced an error:
I have also tried moving all of the <Path> pieces into the main block, without the <Svg> wrapper, which did work to some extent, but then I found that I didn't know how to move them down and right...
This is the example:
<Svg width="555" height="80" viewBox="0 0 555 80">
<Defs>
<RadialGradient id="header-rectangle" cx="0" cy="0" fr="1">
<Stop stopColor="#A01858"/>
<Stop offset="1" stopColor="#87005F"/>
</RadialGradient>
</Defs>
<Rect width="555" height="80" rx="8" fill="url(#header-rectangle)"/>
<Text style={styles.svg} x={`${555-20}px`} y="50%" textAnchor="end" dominantBaseline="middle">Some title here</Text>
<Path d="M0 47.6941V37.8042C0... fill="green"/>
/* rest of the logo svg paths here */
</Svg>
You can wrap your logo in a group and apply a transform to it
<svg width="555" height="80" viewBox="0 0 555 80">
<defs>
<radialGradient id="header-rectangle" cx="0" cy="0" fr="1">
<stop stop-color="#A01858"/>
<stop offset="1" stop-color="#87005F"/>
</radialGradient>
</defs>
<rect width="555" height="80" rx="8" fill="url(#header-rectangle)"/>
<text x="500" y="50%" text-anchor="end" dominant-baseline="middle">Some title here</text>
<g transform="translate(20,10) scale(0.5 0.5)">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="green" />
</g>
</svg>

How to partially fill an svg path using percentage value? [duplicate]

I have a jsfiddle here - http://jsfiddle.net/apbuc773/
I'd like to create a star using svg.
I'd like to stroke the outside of the star. In my example the stroke is on every line which dissects the inner shape.
Also is it possible to half fill the star shape.
I'd like to use this for a star rating but I need half and maybe quarter fills.
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;stroke:blue;"/>
</svg>
You can alternatively do this with a filter. Here is one that animates the fill:
<svg height="210" width="500">
<defs>
<filter id="fillpartial" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feFlood x="0%" y="0%" width="100%" height="100%" flood-color="red" />
<feOffset dy="0.5">
<animate attributeName="dy" from="1" to=".5" dur="3s" />
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" />
</filter>
</defs>
<polygon filter="url(#fillpartial)" points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
203.042, 152.639,
176.756, 148.820,
165.000, 125.000,
153.244, 148.820,
126.958, 152.639,
145.979, 171.180,
141.489, 197.361,
165.000, 185.000" style="fill:white;stroke:red;" />
</svg>
Here is a example: http://jsfiddle.net/apbuc773/11/
Gradient can be used like this:
<svg height="210" width="500">
<defs>
<linearGradient id="half">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="red" />
<stop offset="50%" stop-color="white" />
<stop offset="100%" stop-color="white" />
</linearGradient>
</defs>
<g fill="url(#half)" stroke="blue" stroke-width="2">
If you don't want to change your polygon points, just apply this polygon twice: one time with stroke and one time without.
I've noticed the comment of the accepted answer, and here is how you fill an custom shape:
<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="heart">
<path d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/>
</clipPath>
</defs>
<rect x="0" y="0" fill="rgb(217,217,217)" width="100%" height="100%" clip-path="url(#heart)" />
<rect x="0" y="50%" fill="red" width="100%" height="100%" clip-path="url(#heart)" />
</svg>

how to put an image in a svg with a higher z-index

I have a svg and I want to put an image inside of it.
The svg looks like a wave.
The image should be in front of the wave (visible) but the problem is it is now hiding behind the wave.
I tried already with a higher z-index but without result.
How can I make the image visible in front of the wave?
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="wave">
<svg viewBox="0 0 100 50" preserveAspectRatio="none" >
<g>
<!--<path d="M100,30 Q70,40 50,30 T0,30 v20 h100Z" -->
<path d="M100,30 Q70,60 50,30 T0,30 v20 h100Z"
style="stroke-linejoin:round; stroke:#f6f6f6" stroke-width="0"/>
</g>
</svg>
</symbol>
</svg>
<div class="svg-header-wave">
<svg class="header-wave" style="width: 100%; height: 150px" fill="url(#gradient)">
<image xlink:href="http://develop.webprofis.nl/wisselslag/img/logo.png" x="0" y="-30" width="300px" height="150px" style="z-index: 9999"/>
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#009de1"/>
<stop offset="100%" stop-color="#102b72"/>
</linearGradient>
</defs>
<use xlink:href="#wave"/>
</svg>
</div>
Here is a fiddle you can see what happens:
https://jsfiddle.net/jotect8j/7/
Just include the image tag after the wave.
SVG elements are by default layed over top of one another in the order of their inclusion.
So first element is at the bottom, while last is on top.
<svg class="header-wave" style="width: 100%; height: 150px" fill="url(#gradient)">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#009de1"/>
<stop offset="100%" stop-color="#102b72"/>
</linearGradient>
</defs>
<use xlink:href="#wave"/>
<image xlink:href="http://develop.webprofis.nl/wisselslag/img/logo.png" x="0" y="-30" width="300px" height="150px" style="z-index: 9999"/>
</svg>
https://jsfiddle.net/gwat00Lr/1/
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="wave">
<svg viewBox="0 0 100 50" preserveAspectRatio="none" >
<g>
<!--<path d="M100,30 Q70,40 50,30 T0,30 v20 h100Z" -->
<path d="M100,30 Q70,60 50,30 T0,30 v20 h100Z"
style="stroke-linejoin:round; stroke:#f6f6f6" stroke-width="0"/>
</g>
<image xlink:href="http://develop.webprofis.nl/wisselslag/img/logo.png" x="0" y="-30" width="300px" height="150px" style="z-index: 9999"/>
</svg>
</symbol>
</svg>
<div class="svg-header-wave">
<svg class="header-wave" style="width: 100%; height: 150px" fill="url(#gradient)">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#009de1"/>
<stop offset="100%" stop-color="#102b72"/>
</linearGradient>
</defs>
<use xlink:href="#wave"/>
</svg>
</div>
Here is a fiddle with working demo

How to apply Gradient in SVG Element on which a Pattern is already applied

I have some SVG elements on which there are some pattern already applied. The pattern is applied as fill color. That means the pattern fills up whole SVG element. Basically i want to partially fill up my element using the pattern.
From different sources, i found that i can apply linear gradient to partially fill an element.
So my question is can i use gradient on a pattern or there is any way to partially fill an element by pattern?
NOTE A same element can be drawn(with gradient) on top of the original element(with pattern) to achieve this. But drawing a same object on top of it is not going to help me.
What I have tried
<defs>
<pattern id="patternToApply" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="Firebrick"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="url(#patternToApply)"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
From Robert Longson's Comment i tried following:
First
<defs>
<pattern id="pathCrownGradient" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="url(#gradientToApply)"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="red"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
Second
<defs>
<pattern id="pathCrownGradient" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" fill="url(#gradientToApply)">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="red"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="red"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
Third
<defs>
<pattern id="pathCrownGradient" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" fill="url(#gradientToApply)">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="url(#gradientToApply)"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="red"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
Unfortunately still not working.
You have to take into account the order in which you define what your final display will be.
So first create a pattern.
Then use that pattern to create another pattern.
If that is to your liking, you can then use path and use the second pattern as a fill.

Firefox doesn't adhere to preserveAspectRatio

I have the following graphic embedded into markup:
<div id="svgContainer" >
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMaxYMin meet"
viewBox="0 0 1800 1111">
<defs>
<linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
<stop stop-color="black" offset="0"/>
<stop stop-color="white" offset="1"/>
</linearGradient>
<mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
<circle cx=".5" cy=".5" r=".5" fill="white" />
</mask>
</defs>
<foreignObject width="100%" height="100%"
id="coverImageContainer" mask="url(#masking)">
<img id="coverImage" src="/images/v3/eminem-cover.jpg" />
</foreignObject>
</svg>
</div>
On Safari and Chrome, the graphic resizes appropriately using the center of the graphic as the appropriate anchor point. On Firefox, however, the image resizes as thought I had set preserveAspectRatio on the svg element to xMinYMax meet. Any ideas what's causing this discrepency in behavior?