I'd made all that Duopixes said in this question but it didn't help. The icon shows as text still.
Here my HTML:
<g class="info-container" transform="translate(240,283)">
<text class="svg-icon" x="-60" y="0"></text>
</g>
and
.svg-icon{
font-family: FontAwesome;
}
The style is applied to the text element and FontAwesome.css is attached to the page. What I've done wrong?
UPDATE:
I'm creating svg-elements via D3.js library. And that was the point.
The answer is here. In a D3-chart we need to use \ufXXX format for an icon text.
infoGroup.append("text").attr("class", "svg-icon").text("\uf005");
Related
Edit: this questions is irrelevant in case you're using Font Awesome v. >= 5.8.0 because its maintainers (after a long discussion:)), agreed that the "title" should be removed from the svg files and it's done in v. 5.8.0 : https://github.com/FortAwesome/Font-Awesome/issues/14595
Now, back to the original question:
I just tried the Font Awesome (5) in its 'svg sprites' version, following the official, pretty simple tutorial: https://fontawesome.com/how-to-use/on-the-web/advanced/svg-sprites
Everything's working as expected, except I can see a title popping up when I hover on the image (which is bad). I mean the one we see when we have e.g. <div title = "blah"></div>.
So, in compliance with the docs (I guess), I have copied the 'sprites/regular.svg' file to my server and:
<svg class = 'fa-svg-icon' title = 'my failed attempt to overwrite the title'>
<use xlink:href="icons/font-awesome/sprites/solid.svg#user"></use>
</svg>
The '.fa-svg-icon' class, for the sake of completeness:
.fa-svg-icon{
width:1em;
height:1em;
}
What I see, when hoovering the image, is a title "User" showing up. That's is because this is what is declared in the svg file, in "our" fragment:
<symbol id="user" viewBox="0 0 448 512">
<title id="user-title">User</title>
<path d="M224 256c70.7 0 ......"></path>
</symbol>
I tried adding title = 'something' to both the svg element, and the <use> one, but nothing works o.O
This happens on both FX and Chrome.
Edit 1: I made a test page: https://kpion.github.io/stuff/font-awesome-issue/
I'm pretty sure I'm missing something obvious here, because apparently I'm the only one in this world having this problem 😮 Or google is broken. One or the other :)
Edit 2:
To answer a question from comments, here is what my dev tools -> elements in chrome shows (after 'importing' the svg symbol):
<svg class="fa-svg-icon" title="my -not-working-title for user">
<use xlink:href="icons/font-awesome/sprites/solid.svg#user" title="blah - doesn't work either"></use>
#shadow-root (closed)
<svg id="user" viewBox="0 0 448 512" width="100%" height="100%">
<title id="user-title">User</title>
<path d="M224 256c70.7 0 128-57.3 128-..."></path>
</svg>
</svg>
And no, it does not change when hovering, please bear in mind there is no js involved, either mine or from font awesome.
I'm not able to recreate your code environment in a fiddle to try it myself, but you may try the following CSS code, to get the pointer-events only when the icon has a link:
.fa-svg-icon{
pointer-events: none;
}
.fa-svg-icon a {
pointer-events: auto;
}
I have an SVG that displays fine in Chrome, but when I use it in an HTML page, it doesn't use the right font, instead using the default.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
<![CDATA[
/* latin-ext */
#font-face {
font-family: 'Roboto-Black';
src: url(./Roboto-Black.ttf)
}
]]>
</style>
</defs>
<text style="font-family: 'Roboto-Black'; font-weight:normal;" transform="matrix(1, 0, 0, 1, 239.2, 51.394)">
<tspan x="-101.469" y="27" font-family="Roboto-Black" font-size="72" fill="#000000">TEST</tspan>
</text>
</svg>
The SVG displays fine in Chrome, but when displayed in an HTML page, it doesn't use the right font.
<html>
<head></head>
<body>
<img src="test.svg" width="100%">
</body>
</html>
What am I missing?
Addendum:
Although a valid solution was offered below, I found it was easier to include the svg code directly in the html, instead of referencing an svg file. That way the problem doesn't arise.
When used as an image (via an html <img> tag, an SVG <image> tag or as a CSS background-image) SVG must be consist of a single file in order to protect user privacy.
You can use a font, but you'll need to convert the font data to a data URI and embed the font in the SVG file.
Instead of incorporating/linking to a font, often you can also export the SVG using the option "Export text as curves for font independence". This is at least possible with Affinity Designer. This does make the file a bit heavier, but if you only use the font in this SVG, then of course it is much lighter overall.
Depending on the circumstance, this might be an option worth looking into.
How I solved it:
Instead of using the <img> tag, I have included the .svg file content:
<?php
$svg_file = file_get_contents(get_template_directory_uri().'/test.svg');
echo $svg_file;
?>
Without being encapsulated inside the tag, the included .svg can require and use the font-family.
I'm having a problem with CSS styling of inline SVG code in HTML.
I have a HTML page index.html, CSS file style.css and SVG file external.svg.
In the SVG file I created a few hexagonal objects in symbol tags. I use this file only as library of svg objects.
In the HTML file I use inline SVG that's using objects from the SVG file.
And the CSS file should change color of some inline SVG text in HTML file.
This is an example of the inlined SVG code from the HTML file. The <use ...> tag imports objects from the SVG file.
<svg id="zab4text" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,300,300">
<a xlink:href="https://www.google.com" xlink:title="google">
<use xlink:href="external.svg#hex4" fill="none"/>
<text font-size="40" font-weight="bold" font-family="DejaVu Sans">
<tspan x="55" y="105">first line</tspan>
<tspan x="55" y="150">second line</tspan>
<tspan x="75" y="230">third line</tspan>
</text>
</a>
</svg>
The CSS used to style this part of code is this:
#zab4text {
width: 150px;
height: 150px;
fill: red;
}
The result should be a red text in a hexagon. The hexagon is fine, but the text is black. The fill attribute has no effect on the text.
When I want to have a red text I have to give an id directly to the <text> tag and style it. Then it works.
I looked in the inspector in google chrome 55 what's happening.
When the fill attribute was for the svg tag as in the example, I saw in the inspector that the fill color for the text was inherited from zab4text but it didn't set the color.
If the fill attribute was for the text tag, then it was his fill color and it worked fine.
Could it be some bug in google chrome?
When I first opened the HTML page the color was red, but when I opened the link it is pointing to, it changed color to black and I couldn't get the red back.
I tried it in firefox 50 and the same behavior.
I know about the google chrome external file behavior, I use simple python3 web server sudo python3 -m http.server 80.
Has somebody any idea what I am making wrong or where is the problem?
So I found the answer.
The line
<text font-size="40" font-weight="bold" font-family="DejaVu Sans">
should be
<text font-size="40" font-weight="bold" font-family="DejaVu Sans" fill="inherit">
then it will take the color from the <svg> tag in all browsers I tried.
Here is an example: http://miriti.ru/svgtest/
If you'll look at this example in any browser you will see two grey squares with green circles (labled "Symbol") inside. Except for Firefox (I am testing on Firefox 35.0.1 on windows and mac os x).
These SVGs are absolutely identical but the second one is placed inside the polymer component.
Code on GitHub: https://github.com/miriti/svgtest
Any suggestion about what can be the cause of this problem?
I seem to find a workaround for your problem. First of all, wrap your <svg> element with <div id="content">. This is necessary, because later we will reinitialize the inner content of this div.
<template>
<div id="content">
<svg width="400" viewBox="0 0 400 400">
...
</svg>
</div>
</template>
Then in the script section do the following woodoo-magic:
domReady: function() {
this.async(function() {
this.injectBoundHTML(this.$.content.innerHTML, this.$.content);
}, this);
}
Please don’t complain about the weirdness of this trick :)
You are done: FF is satisfied now.
Using SVG sprites I ran into issues that are similar to the one you describe but not the same. So what I propose is not exactly a solution to your problem, however you could avoid such issues altogether by using iron-iconset-svg (https://elements.polymer-project.org/elements/iron-icons?active=iron-iconset-svg), which in my opinion provides a cleaner/easier solution. Its simply a wrapper for your SVG sprite sheet, so you define your icons almost the same way and use them with iron-icon.
Defining a custom iconset (put it directly into the page or wrap it inside an element + set a name that describes the icons, here: 'your-iconset-name')
<iron-iconset-svg name="your-iconset-name" size="24">
<svg>
<defs>
<g id="your-icon-name">
<rect x="12" y="0" width="12" height="24" />
<circle cx="12" cy="12" r="12" />
</g>
</defs>
</svg>
</iron-iconset-svg>
If you wrap them, lets say in 'your-custom-iconset', you can include the iconset like this:
<your-custom-iconset></your-custom-iconset>
Using icons
When you need an icon you just include iron-icons (https://elements.polymer-project.org/elements/iron-icons) and place it like this:
<iron-icon icon="your-iconset-name:your-icon-name"></iron-icon>
You can then give it a class to apply styling and don't need to use 'fill' for its color, just use 'color'.
I fixed it in Polymer 1.0 like this:
attached: function () {
//Fix "svg-use" in Firefox!! -> Properly bad for Performance (Issue: https://github.com/Polymer/polymer/issues/1182)
this.async(function () {
this.$.content.innerHTML = this.$.content.innerHTML;
}, this);
}
but I don't use Bindings in my component (yet)
So I recently found this svg technique on csstricks and decided to use it in conjunction with the grunt task grunt-svgstore. I thought this was the perfect thing since you have access to the actual svg with css and javascript without pasting the whole svg code in the html. But I found one major problem I can't solve which is hoverstates (and similar). The problem is the following. If that's my html body (with the svg on top)
<body>
<svg>
<symbol id="arrow">
<path ... />
</symbol>
</svg>
<svg id="icon-arrow">
<use xlink:href="#arrow"></use>
</svg>
</body>
I can access the #icon-arrow svg or the #arrow symbol but neither will give me the ability to create a hoverstate. When doing #icon-arrow I can get a hoverstate but I can't access the actual shape because it is not actually a child of the #icon-arrow so doing #icon-arrow #arrow:hover won't work. On the other hand directly selecting the shape doesn't work because the shape is not actually there but it's only a reference. Is it actually possible to do hoverstates using this technique? Or are there any other solutions?