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?
Related
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>
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
These shapes all display properly, but for some reason there is a HUGE vertical gap of like 10,000px between the first 2 shapes and the remaining shapes. When I open the page I have to scroll down a lot of white space to see the rest of the shapes. I have not been able to figure out what is causing that.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg width="2000" height="2000">
<circle cx="80" cy="80" r="50" fill="green" />
</svg>
<svg width="2000" height="2000">
<rect cx="80" cy="80" r="50" fill="blue" />
</svg>
<!-- THERE IS A WEIRD GAP HERE -->
<!-- SVG Rounded Rectangle
Example -->
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<!-- SVG Star
Example -->
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
<!-- SVG Logo
Example -->
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
I just started with SVG. simple things like
<svg>
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="#222" mask="url(#Mask)" />
</svg>
In this jsfiddle I have this svg with on other one. However, it only shows the one first defined. Can someone explain why and how to fix this ? Thnx!
Hi I have been stuck on this problem for a while now.
Basically I am trying to follow this MDN article and this example which explains how to mask an element using the mask CSS property and an embedded SVG image with Firefox.
<style>.target { mask: url(#m1); }</style>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/08/DioHolyDiver.jpg/220px-DioHolyDiver.jpg" alt="" class="target" />
<svg width="220" height="220">
<mask maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="m1">
<linearGradient y2="0.5" x2="0.6" y1="0.5" x1="0" id="g">
<stop stop-color="white" offset="0"/>
<stop stop-opacity="0" stop-color="white" offset="1"/>
</linearGradient>
<rect id="svg_1" height="220" width="220" y="0" x="0" stroke-width="0" fill="url(#g)"/>
</mask>
</svg>
You can see my attempt here http://jsfiddle.net/pjgalbraith/cnLHE/. As you can see it just displays a blank image.
here
<rect id="svg_1" height="220" width="220" y="0" x="0" stroke-width="0" fill="url(#g)"/>
x and y should be greater than 0 and less than 1 and there is no gradient because height and width should be less
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<body>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/08/DioHolyDiver.jpg/220px-DioHolyDiver.jpg" alt="" class="target" />
<style>.target { mask: url(#m1); } </style>
<svg:svg width="220" height="220">
<svg:mask maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="m1">
<svg:linearGradient id="g" gradientUnits="objectBoundingBox" y2="0.5" x2="0.6" y1="0.5" x1="0">
<svg:stop stop-color="white" offset="0"/>
<svg:stop stop-color="white" stop-opacity="0" offset="1"/>
</svg:linearGradient>
<svg:rect id="svg_1" x="0.5" y="0.2" width="0.5" height="0.8" stroke-width="0" fill="url(#g)"/>
</svg:mask>
</svg:svg>
</body>
</html>