1

I have svg file that generate country map - named as countryMap.svg

I imported this file to html page as

<embed src="countryMap.svg" type="image/svg+xml"></embed> .

Now I have CSS file for styling on svg data. So I directly imported the css file to svg file as

<?xml-stylesheet type="text/css" href="countryMap.css" ?>

But I want this css file to place on html page as

<link rel="stylesheet" type="text/css" href="countryMap.css">.

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Country</title>
  </head>
       
  <body>
    <link rel="stylesheet" type="text/css" href="countryMap.css">
         <div>
            <embed src="countryMap.svg" type="image/svg+xml"></embed>
            <!-- <object src="countryMap.svg" type="image/svg+xml"></object> -->
            <!-- <iframe src="countryMap.svg"></iframe> -->
         </div>
  </body>
</html>

But Now the CSS doesn't effect on the SVG file.

For the javascript file to import, I checked here SVG But the errors are following -

Uncaught ReferenceError: jQuery is not defined   in jquery.svg.js 1394 
Uncaught TypeError: Cannot set property 'cssText' of null   in jquery-1.11.1.js 7672

How can I comeout from here ??? Is there any way for the css and svg file link to html page !!!

Community
  • 1
  • 1
royki
  • 1,593
  • 3
  • 25
  • 45

0 Answers0