Not sure this is possible, so I have a back-up plan (use a background image and :after to mask one of 3x transarent PNGs with the border in the image and use nth-child to change them).
Here's what I'm trying to accomplish. I know clip-path will give me the image mask, but I need the curved edges and the border color, too. Which I don't think is possible in pure CSS.
<!DOCTYPE html>
<html>
<style>
img {
max-width: 100%;
display: block;
}
.container {
width: 300px;
height: 300px;
margin: 1em auto;
}
.frame-border {
stroke: #10c020;
stroke-width: 4;
}
</style>
<body>
<div class="container">
<svg viewBox="-10 -10 120 120">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="300" height="300"></rect>
<path id="Path_611" data-name="Path 611" d="M1,38a12.225,12.225,0,0,1,2.558-3.025L41.351,13.462A21.12,21.12,0,0,1,46.733,12.4a14.319,14.319,0,0,1,4.81.765L89.2,34.814A7.333,7.333,0,0,1,92,37a7.273,7.273,0,0,1,1,3.4v45.3A6.741,6.741,0,0,1,92,89a12.9,12.9,0,0,1-3.015,2.945L50.42,110.628a8.953,8.953,0,0,1-3.688.786,13.383,13.383,0,0,1-4.153-.992L4.2,92.012A12.105,12.105,0,0,1,1,89a7.112,7.112,0,0,1-1-3.581V41.534A9.569,9.569,0,0,1,1,38Z" transform="translate(1.502 -10.892)" fill="#FFFFFF"/>
</mask>
</defs>
<image mask="url(#mask)"
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://randomuser.me/api/portraits/women/47.jpg" width="100" height="100">
</image>
<g class="frame-border" fill="none">
<path id="Path_611" data-name="Path 611" d="M1,38a12.225,12.225,0,0,1,2.558-3.025L41.351,13.462A21.12,21.12,0,0,1,46.733,12.4a14.319,14.319,0,0,1,4.81.765L89.2,34.814A7.333,7.333,0,0,1,92,37a7.273,7.273,0,0,1,1,3.4v45.3A6.741,6.741,0,0,1,92,89a12.9,12.9,0,0,1-3.015,2.945L50.42,110.628a8.953,8.953,0,0,1-3.688.786,13.383,13.383,0,0,1-4.153-.992L4.2,92.012A12.105,12.105,0,0,1,1,89a7.112,7.112,0,0,1-1-3.581V41.534A9.569,9.569,0,0,1,1,38Z" transform="translate(1.502 -10.892)" stroke-linecap="round" />
</g>
</svg>
</div>
</body>
</html>
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.
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>