I've made a svg with video display inside like this :
<video muted loop width="852" height="480" autoplay class="svg-clipped-text" style=" margin: 0 auto;
display: block;">
<source src="<?php echo get_stylesheet_directory_uri(); >/vid/video.mp4" type="video/mp4">
</video>
<svg height="0" width="0">
<clipPath id="svgTextPath">
<text x="20" y="200" textLength="800px" lengthAdjust="spacing" font-family="Calibri" font-size="210px" font-weight="bold">
insider.
</text>
</clipPath>
</svg>
And my css :
.svg-clipped-text {
clip-path: url(#svgTextPath);
-webkit-clip-path: url(#svgTextPath);
}
It works properly in Chrome, in Firefox but no render in Safari.
I've tried things i've found on stackoverflow but nothing seems to resolved my problem..
Thanks !
For some reason an SVG mask doesn't work directly on a video in Safari, so you'll need to create a parent div and put the class on that.
This may require a bit of wrangling on the video itself, maybe setting 100% width and height.
Related
I have created this svg with an external font, that part of the SVG looks like this:
<defs>
<style type="text/css">#import url(https://fonts.googleapis.com/css?family=Cairo|Gloria+Hallelujah|Rokkitt|Shadows+Into+Light|Signika></style>
</defs>
In Chrome this works nice, but when I try to load the svg into GIMP the font is missing. Is there a way for GIMP to render the google fonts?
Complete test svg:
<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">#import url(https://fonts.googleapis.com/css?family=Cairo|Gloria+Hallelujah|Rokkitt|Shadows+Into+Light|Signika></style>
</defs>
<style>
text {
font-size: 30px;
font-family: Shadows Into Light;
}
</style>
<text x="20" y="35"><tspan>Test</tspan></text>
</svg>
Update: For the SVG to work in Gimp or Inkscape:
<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
<![CDATA[
#font-face {
font-family: 'Shadows Into Light';
font-style: normal;
font-weight: normal;
src: local('Shadows Into Light'), local('ShadowsIntoLight'), url('http://themes.googleusercontent.com/static/fonts/shadowsintolight/v3/clhLqOv7MXn459PTh0gXYHW1xglZCgocDnD_teV2lMU.woff') format('woff');
}
text {
font-size: 30px;
font-family: Shadows Into Light;
}
]]>
</style>
</defs>
<text x="20" y="35"><tspan>Test</tspan></text>
</svg>
The problem goes further than external Google fonts:
1) Gimp (or whatever SVG parser it uses) is picky about the syntax (normally the style should be in CDATA)
2) Even with the CDATA fix (that at least stop nasty messages in the Gimp console), Gimp won't abide to the font-family style, even for fonts installed system-wide.
Creating a svg from adobe xd and trying to create a hover effect for the svg can change fill: colors on hover.
# Heres the svg code #
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1563 3492 45 45">
<defs>
<style>
.cls-1 {
fill: #79bf73;
font-size: 45px;
font-family: SegoeMDL2Assets, Segoe MDL2 Assets;
}
</style>
</defs>
<text id="E1CC" class="cls-1" transform="translate(1563 3537)"><tspan x="0" y="0"></tspan></text>
</svg>
# Heres the html code #
<div class="play">
<img src="http:localhost/mockup3/images/E101.svg" height="42" width="42">
</div>
# Heres the css code #
svg text #E101:hover{
fill: #003565;
}
SVGs inserted as img can't have interaction, they behave as images. To fix this, simply put the full SVG code inline. Cleaned up the code a bit, as these tools often produce ugly code.
HTML
<div class="play">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1563 3492 45 45" width="42" height="42">
<text id="E1CC" class="cls-1" transform="translate(1563 3537)"><tspan x="0" y="0"></tspan></text>
</svg>
</div>
CSS
svg text {
fill: #79bf73;
font-size: 45px;
font-family: SegoeMDL2Assets, Segoe MDL2 Assets;
}
svg text:hover{
fill: #003565;
}
Keep in mind the icon will only be visible with the font Segoe MDL2 Assets installed.
Consider this simple SVG document:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
text { font-size: 400%; }
#keyframes basic {
0% { transform: translateY(-100px); opacity: 0; }
100% { transform: translateY(100px); opacity: 1; }
}
.basic { animation: basic 1s linear infinite; }
</style>
<title>SVG Animation using CSS: Bounce</title>
<text class="basic" x="150" y="200">SVG</text>
<text x="100" y="200">–</text>
</svg>
JSFiddle here
It animates just fine in Firefox and Chrome. In Safari, however, only the opacity property is animated, and only the first translateY (that of 0%) is taken into account. (Tested in Safari version 10.0.3)
Using the exact same CSS and applying them in an HTML document, to a <p> for example, the animations work fine everywhere, including Safari.
Does Safari not support animation of translate in SVG? And where can I check whether it's supported?
Safari does not support animation of the <text> element! Wrapping the text inside a group fixes the issue:
<g class="basic">
<text x="150" y="200">SVG</text>
</g>
JSFiddle
This does not answer the second question however, where can one check whether that property is animatable or not in theory, and in practice?
I'm trying to embed some font-awesome icons within a D3 visualization which is using SVG. I've found some solutions that get me part of the way such as:
How do I include a font awesome icon in my svg?
Adding FontAwesome icons to a D3 graph
These are a great starting point but seem to only work with a basic character. What I'd like to do however is use some of the font-awesome stacking features to make composite icons. Has anyone ever tried to do this before in SVG? Or is this simply not going to be possible?
When I've tried to put an example together, I've had to include the characters in 2 different text elements (I really wanted them inside one) and I feel like I'm now in a whole world of pain with regards to manually sizing or positioning myself. Does anyone have a possible resolution on how this might be achievable?
I've included where I've got to so far, red being the desired output, green being the SVG.
span {
border: thin solid red;
}
svg {
border: thin solid green;
}
text {
fill: black;
font-family: 'FontAwesome';
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<span class="fa-stack fa-lg">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-info fa-stack-1x"></i>
</span>
<svg width="100" height="100">
<text x="50" y="50"></text>
<text x="50" y="50""></text>
</svg>
If you look at the css of fa-stack-1x and fa-stack-2x, you'll see that there is some "manual" positioning going on. You can translate those into valid SVG. On the "outer" stack:
text-anchor="middle" style="font-size: 2em" alignment-baseline="middle"
And inner stack:
text-anchor="middle" alignment-baseline="middle"
Produces:
span {
border: thin solid red;
}
svg {
border: thin solid green;
}
text {
fill: black;
font-family: 'FontAwesome';
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<span class="fa-stack fa-lg">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-info fa-stack-1x"></i>
</span>
<svg width="100" height="100">
<text x="50" y="50" text-anchor="middle" style="font-size: 2em" alignment-baseline="middle"></text>
<text x="50" y="50" text-anchor="middle" alignment-baseline="middle" ></text>
</svg>
This seems like it ought to be easy, but I'm just not getting something.
I want to make an HTML page containing a single SVG image that automatically scales to fit the browser window, without any scrolling and while preserving its aspect ratio.
For example, at the moment I have a 1024x768 SVG image; if the browser viewport is 1980x1000 then I want the image to display at 1333x1000 (fill vertically, centred horizontally). If the browser was 800x1000 then I want it to display at 800x600 (fill horizontally, centred vertically).
Currently I have it defined like so:
<body style="height: 100%">
<div id="content" style="width: 100%; height: 100%">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100%" height="100%"
viewBox="0 0 1024 768"
preserveAspectRatio="xMidYMid meet">
...
</svg>
</div>
</body>
However this is scaling up to the full width of the browser (for a wide but short window) and producing vertical scrolling, which isn't what I want.
What am I missing?
How about:
html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }
Or:
html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }
I have an example on my site using (roughly) this technique, albeit with 5% padding all around, and using position:absolute instead of position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml
(Using position:fixed prevents a very edge-case scenario of linking to a sub-page anchor on the page, and overflow:hidden can ensure that no scroll bars ever appear (in case you have extra content.)