ng-repeat #font-face style not working - javascript

I'm dynamically creating a list of fonts that are stored on my server. I want to ng-repeat through the list of fonts and apply each font to a new element.
So this is what I'm doing:
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="font in ctrl.fontList">
<style>
#font-face {font-family:"{{font.family}}"; src: url({{font.url}});}
</style>
<svg height="100%" width="100%" position>
<rect x="0" y="0" width="100%" height="100%" fill="#288feb"></rect>
<g class="groupLayer">
<text fill="#ffffff" x="0" y="0" font-size="48" font-family="{{font.family}}"
>{{ctrl.text}}</text>
</g>
</svg>
</div>
</div>
This might be a big no-no in html but I have my style within my div as I wasn't trying to get this to work any way possible.
Anyway, this isn't working for me.
The {{font.family}} outputs OstrichSans-Black and the {{font.url}} is locally hosted on my localhost and the url is valid.
Any ideas why this isn't working? What should I do?


Try applying the font via style instead:
<text style="font-family: '{{font.family}}';">


What version of you angularjs ? while test you code, i using 1.2.x and doesn't work with you code. After update to angular 1.4.8 this works:
var app = angular.module('myApp',[]);
app.controller('MyController', function($scope) {
var ctrl = this;
ctrl.fontList = [
{
"family": "Abhaya Libre",
"url": "https://cdn.rawgit.com/mooniak/abhaya-libre-font/gh-pages/fonts/AbhayaLibre-Regular.otf"
},
{
"family": "Gemunu Libre",
"url": "https://cdn.rawgit.com/mooniak/gemunu-libre-font/gh-pages/tests/fonts/GemunuLibre-Regular.otf"
},
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="row" ng-app="myApp" ng-controller="MyController as ctrl">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="font in ctrl.fontList">
<style>
#font-face {font-family:{{font.family}}; src: url({{font.url}});}
</style>
<svg height="100%" width="100%" position>
<rect x="0" y="0" width="100%" height="100%" fill="#288feb"></rect>
<g class="groupLayer">
<text fill="#ffffff" x="0" y="50" font-size="48" style="font-family:{{font.family}}"
>{{font.family}}</text>
</g>
</svg>
</div>
</div>


I found out what the issue was.. and it's really frustrating that this was the problem...
Very simply, I forgot to put quotation marks around my url parameter within the #font-face. That was literally the reason!

Related

How to use svg in Vue standalone script without build step

I'm trying to use Vue as a standalone script in an HTML file, but it's causing my inline svg icons to just become solid filled squares. I've tried both Vue 2 and Vue 3 as standalone scripts and both give the same behavior.
Although I've found solutions to Vue's svg issues that involve webpack loader configuration, I'm looking for a way to resovle the svg issues without any build step and only using Vue as a standalone script.
Note that the icon svg is copied directly from Carbon Design Icons
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/vue#3"></script>
</head>
<body>
<div id="app">
{{message}}
<svg
id="icon"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<defs>
<style>
.cls-1 {
fill: none;
}
</style>
</defs>
<path
d="M16,8a5,5,0,1,0,5,5A5,5,0,0,0,16,8Zm0,8a3,3,0,1,1,3-3A3.0034,3.0034,0,0,1,16,16Z"
/>
<path
d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM10,26.3765V25a3.0033,3.0033,0,0,1,3-3h6a3.0033,3.0033,0,0,1,3,3v1.3765a11.8989,11.8989,0,0,1-12,0Zm13.9925-1.4507A5.0016,5.0016,0,0,0,19,20H13a5.0016,5.0016,0,0,0-4.9925,4.9258,12,12,0,1,1,15.985,0Z"
/>
<rect
id="_Transparent_Rectangle_"
data-name="<Transparent Rectangle>"
class="cls-1"
width="32"
height="32"
/>
</svg>
</div>
<div>
Icon outside of Vue
<svg
id="icon2"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<defs>
<style>
.cls-2 {
fill: none;
}
</style>
</defs>
<path
d="M16,8a5,5,0,1,0,5,5A5,5,0,0,0,16,8Zm0,8a3,3,0,1,1,3-3A3.0034,3.0034,0,0,1,16,16Z"
/>
<path
d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM10,26.3765V25a3.0033,3.0033,0,0,1,3-3h6a3.0033,3.0033,0,0,1,3,3v1.3765a11.8989,11.8989,0,0,1-12,0Zm13.9925-1.4507A5.0016,5.0016,0,0,0,19,20H13a5.0016,5.0016,0,0,0-4.9925,4.9258,12,12,0,1,1,15.985,0Z"
/>
<rect
id="_Transparent_Rectangle_"
data-name="<Transparent Rectangle>"
class="cls-2"
width="32"
height="32"
/>
</svg>
</div>
</body>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: "Hello Vue!"
};
}
}).mount("#app");
</script>
</html>
https://codesandbox.io/s/wonderful-albattani-dxkvdt?file=/index.html:0-2221

change fill:none to fill:transparent

This ended up not being a Vue issue, but a problem in the SVG code copied from an icon library. Estus Flask spotted that the style tag inside the SVG defs was likely the problem because it can cause inconsistent behavior in different scenarios, such as whether or not the inline svg style is contained within a div managed by Vue. The solution was moving that style class to a separate stylesheet.

ForeignObject in an SVG doesn't work - React

I'm trying to display a React component inside of an SVG. I used the foreignObject component to display my React object (ToolbarItem) inside of the SVG. However, nothing is displayed. What I did wrong?
Thanks for your help
<svg xmlns="http://www.w3.org/2000/svg" width="222.002" height="119.151" viewBox="0 0 222.002 119.151">
<g id="Margin" transform="translate(-51 -59)">
<path id="Soustraction_10" data-name="Soustraction 10" d="M10914,6398.1h0l-39-38.132v-41.828l39-38.139Z" transform="translate(-10641 -6220.475)" fill="#313c57">
<foreignObject x="40" y="40" width="100" height="100">
<ToolbarItem propKey="marginTop" type='draggableNumber' max={maxTop} />
</foreignObject>
</path>
</g>
</svg>

You can add a body tag
<foreignObject x="40" y="40" width="100" height="100">
<body>
<ToolbarItem propKey="marginTop" type='draggableNumber' max={maxTop} />
</body>
</foreignObject>
EDIT: the above works but generates a warning message.
Do the following instead :
<foreignObject x="40" y="40" width="100" height="100">
<div data-xmlns="http://www.w3.org/1999/xhtml">
<ToolbarItem propKey="marginTop" type='draggableNumber' max={maxTop} />
</div>
</foreignObject>

Export style with <svg> to .svg

I have an HTML file, that has a link to export all the <svg> inside to one .SVG. That's perfect, it's what I need and the community helped me a lot.
Now I have a problem that all the SVG inside the file, are clogged on top of each other.
I need them to keep the same 'display' they have on the webpage. I tried using internal, inline and external style... But nothing worked.
The X and Y I have in the <svg> is executed when I open the .SVG file in any program, but it doesn't affect anything on the HTML document.
I'm using the svg-converter.js to get all the .svg inside the <img> and convert to <svg>.
For some reason, inside that JS, something don't let me group all the <svg> inside another <svg>, only inside <div>. I have no idea if that is somehow causing the problem of the style not being exported.
Here is the working link.
Any help will be much appreciated.
Ps: I'd love to know why my question is downvoted.

You need to use x and y attributes to arrange your inner <svg> elements inside your root <svg> element.
Something like this (I've replaced the SVG contents with circles for brevity):
<svg xmlns="http://www.w3.org/3000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 1224 1224">
<svg x="0" y="0" width="50%" height="50%" viewBox="0 0 612 612">
<circle fill="#7AB344" cx="306" cy="306" r="250"/>
</svg>
<svg x="50%" y="0" width="50%" height="50%" viewBox="0 0 612 612">
<circle fill="#8DD4F0" cx="306" cy="306" r="250"/>
</svg>
<svg x="0" y="50%" width="50%" height="50%" viewBox="0 0 612 612">
<circle fill="orange" cx="306" cy="306" r="250"/>
</svg>
<svg x="50%" y="50%" width="50%" height="50%" viewBox="0 0 612 612">
<circle fill="rebeccapurple" cx="306" cy="306" r="250"/>
</svg>
</svg>

THIS IS THE FINAL WORKING CODE:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/3000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brand.express/projects/teste/svg-converter.js"></script>
</head>
<body>
<main id="content">
<div id="mySVG" style="width:100%;padding:0;margin:0;">
<img src='img/leafers-sapling.svg' class='svg-convert' x="0" y="0" width="286px">
<img src='img/aqualine-sapling.svg' class='svg-convert' x="286px" y="0" width="286px">
<img src='img/leafers-sapling.svg' class='svg-convert' x="572px" y="0" width="286px">
<img src='img/aqualine-sapling.svg' class='svg-convert' x="858px" y="0" width="286px">
</div>
</main>
<script>
//transforma os .svg para <svg>
jQuery(document).ready(function($) {
$('.svg-convert').svgConvert({
onComplete: function() {
exportSVG(document.getElementById('mySVG'));
},
svgCleanupAttr: []
});
});
</script>
<script>
var exportSVG = function(divContainer) {
var svgContainer = document.createElementNS("http://www.w3.org/1999/xhtml", "svg");
svgContainer.setAttribute('width','1200px');
$('#mySVG').find("svg").clone().appendTo(svgContainer);
var svgData = svgContainer.outerHTML;
var a = document.createElement('a');
a.href = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData);
a.download = 'finalSVG.svg';
a.innerHTML = 'download the .SVG file';
document.body.appendChild(a);
};
</script>
</body>
</html>

how to position svg which is nested and contained in parent svg

<svg width="33.5cm" height="57.5cm" style="border:1px solid black;">
<svg width="31.8cm" height="54cm" x="1cm" y="2cm" style="border:1px solid black;">
<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
<!-- Header -->
<svg width="100%" height="5.8cm">
<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
<!-- Logo -->
<svg width="23.6cm" height="100%">
<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
</svg>
</svg>
<!-- body -->
<svg width="100%" height="20.6cm" transform="translate(0cm,5.8cm)">
<rect width="100%" height="100%" style="stroke:black; stroke-width:3; fill:none;"/>
</svg>
<!-- Ad -->
<svg width="100%" height="26.8cm">
<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
</svg>
</svg>
</svg>
i'm working on svg in html and added some nested svg in the webpage. how can I position the child svg contents which are present in a parent svg? the x and y coordinate is not working. and also tried translate but it is not working. I want to give values in cm (I don't know how to do it), but values in px also not working. is there a way to position svgs relative to one another? or if not possible, how can I translate or position it manually?
The code is in sniplet, kindly check it out

You can use x and y attributes to position nested <svg> elements. For example:
<!-- body -->
<svg width="100%" height="20.6cm" x="0" y="5.8cm">
In the example below I have used this method to position the body svg. I also made it red here so it is obvious which one it is.
<svg width="33.5cm" height="57.5cm" style="border:1px solid black;">
<svg width="31.8cm" height="54cm" x="1cm" y="2cm" style="border:1px solid black;">
<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
<!-- Header -->
<svg width="100%" height="5.8cm">
<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
<!-- Logo -->
<svg width="23.6cm" height="100%">
<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
</svg>
</svg>
<!-- body -->
<svg width="100%" height="20.6cm" x="0" y="5.8cm">
<rect width="100%" height="100%" style="stroke:black; stroke-width:3; fill:red;"/>
</svg>
<!-- Ad -->
<svg width="100%" height="26.8cm">
<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
</svg>
</svg>
</svg>
Note Be aware that a "cm" in SVG units will almost certainly not correspond to a real-world cm - for example on screen or printed. SVG units like "cm" and "in" are based on a standard CSS DPI of 96 CSS pixels per inch. No attempt is made to match the real DPI of the device that the SVG is being rendered on.

Displaying and changing an external SVG background image

I'm trying to display and an external image inside an svg and then change it on button click. I can't get the background to show nor can I get it to change.
here is my fiddle:
https://jsfiddle.net/bsp9601z/
<head><meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<div id="slider"></div>
<button onclick="go()">change background</button>
<g id="backgroundImage">
<image width="100%" height="100%" xlink:href="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" /></g>
<svg width="792pt" height="612pt" viewBox="0 0 792 612" enable-background="new 0 0 792 612"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
</svg>
</svg>
function go(){
var im = document.getElementById('backgroundImage');
im.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://demo.elmanawy.info/moraco/layout1/assets/images/portfolio/8.jpg');
im.setAttributeNS('http://www.w3.org/1999/xlink','width', "100%");
im.setAttributeNS('http://www.w3.org/1999/xlink','height', "100%");
}

You are missing <svg> tags and selecting <g> rather than <image>
<button onclick="go()">change background</button>
<svg>
<g id="backgroundImage">
<image width="100%" height="100%" xlink:href="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" />
</g>
</svg>
<script>
function go() {
var im = document.getElementById('backgroundImage').querySelector("image");
im.setAttributeNS('http://www.w3.org/1999/xlink'
, 'xlink:href'
, 'http://demo.elmanawy.info/moraco/layout1/assets/images/portfolio/8.jpg');
}
</script>

Categories

Resources