How to set Background-image with SVG hosted elsewhere

Question

How to set Background-image with SVG hosted elsewhere

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

2

I'm making a website that needs to get a svg from another site ( www.teste.com.br/imagem.svg ) and arrow it as the background. But I'm not getting it.

Here's how I'm doing:

   <html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height     attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
       <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
       <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
    <body>

        <div class="fullscreen">
            <iframe id="data"></iframe>
        </div>
        <script src="js/jquery-1.9.1.min.js"></script>


        <script type="text/javascript">
           var div = document.getElementById('data');
           var data = new Date();

           var d = new Date();
           var mes = d.getMonth()+1;
           var dia = d.getDate();

           /// alterando o src
           var imagem = 'http://www.teste.com.br/clientes/svg/' + '01' + '/' + '01' + '.svg';
           div.style = 'background-image:url('+imagem+')';
       </script>
    </body>
 </html>

html css3 svg

asked by anonymous 01.04.2014 / 01:00

4 answers

Calculation of percentage of growth CSS wallpaper

score 1 · Answer 1

For this you can use div.style.backgroundImage='url('+imagem+')'; , also remove

';' which comes after the variable 'image' - > background-image:url('+imagem;+')';

var div = document.getElementById('data');
var data = new Date();

var d = new Date();
var mes = d.getMonth()+1;
var dia = d.getDate();

/// alterando o style
var imagem =         'http://www.teste.com.br/clientes/' + '01' + '/' + '01' + '.svg';
div.style.backgroundImage='url('+imagem+')';

See an example:

JS Fiddle

score 1 · Answer 2

I think you want to set background of div and not iframe directly, because your variable saves the element is called div . If so, you should change your sealing to the following:

var div = document.getElementById('fullscreen');

And your html for:

<div id="fullscreen">
    <iframe id="data" allowtransparency="true"></iframe>
</div>

And set the image in the div background like this:

var imagem = 'http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg';
div.style.backgroundImage = 'url('+imagem+')';

This worked here for me

score 1 · Answer 3

It seems that it is not working because the remote server from which you are trying to get the image is sending the file with incorrect headers, this causes the browser to ignore the undue image.

Headers:

HTTP/1.1 200 OK
Date: Tue, 01 Apr 2014 00:03:18 GMT
Server: Apache/2.2.3 (CentOS)
Last-Modified: Sun, 30 Mar 2014 21:36:40 GMT
ETag: "29100b5-1f870-baf26a00"
Accept-Ranges: bytes
Content-Length: 129136
X-Powered-By: PleskLin
Connection: close
Content-Type: text/xml

See the last line "Content-Type: text / xml".

#edit

Reply from here: link

Create a .htaccess file in the directory where the images are placed and put the following lines in it:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

score 0 · Answer 4

According to validator.w3.org there are two problems with the files your server is sending:

The charset of the document is not specified;

The Mime Type is incorrect (it is returning text/xml instead of image/xml+svg .

Direct link to test result

I do not know whether both need to be fixed or not, but I can confirm that the second is the root cause of your problem. I made two copies of file mentioned in the comments :

01.svg (validation - passed)
01.xml (validation - same problem as Mime Type )

Chrome opened and displayed both with no problem (on an isolated tab), but playing both in Anderson B. Furlan's jsFiddle the first worked correctly, but the second did not.

Correct example (extension svg )
Incorrect example (extension xml )

Solution

What you need to do is to configure the server to return the correct Mime Type . If the web server is Apache - and the Cahe solution did not work for you - then you need to look for an alternative path . I do not know what your restrictions are (your client is using shared hosting) or have full control of Apache? What platform?), But I leave as an example the line in my apache/conf/mime.types that deals with this type :

image/svg+xml                   svg svgz

This file is being included by httpd.conf as follows (comments removed for brevity,% examples of% kept):

<IfModule mime_module>
    TypesConfig conf/mime.types

    AddType application/x-compress .Z
    AddType application/x-gzip .gz .tgz

    ...

(Note: I do not know if it makes a difference, but here the extensions include the point, ie AddType instead of .svg - if you do this in your svg resolves? http://www.htaccess-guide.com/adding-mime-types/">here post should be optional ...)

Whatever you try to solve, use the validator to check if the settings applied on the server are working.