天道酬勤,学无止境

将SVG嵌入到ReactJS中(Embedding SVG into ReactJS)

问题

是否可以将SVG标记嵌入到ReactJS组件中?

render: function() {
  return (
    <span>
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ...
    </span>
  );
}

结果错误:

不支持命名空间属性。 ReactJSX不是XML。

最简单的方法是这样做。 使用React React之类的东西对于我想做的事情来说是过大的手段。

回答1

更新2016-05-27

从React v15开始,React中对SVG的支持与当前浏览器对SVG的支持(接近?)达到100%奇偶校验(源)。 您只需要应用一些语法转换就可以使其与JSX兼容,就像您已经对HTML所做的一样( classclassNamestyle="color: purple"style={{color: 'purple'}} )。 对于任何命名空间(用冒号分隔)的属性,例如xlink:href ,删除:并大写该属性的第二部分,例如xlinkHref 。 这是具有<defs><use>和内联样式的svg的示例:

function SvgWithXlink (props) {
    return (
        <svg
            width="100%"
            height="100%"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
        >
            <style>
                { `.classA { fill:${props.fill} }` }
            </style>
            <defs>
                <g id="Port">
                    <circle style={{fill:'inherit'}} r="10"/>
                </g>
            </defs>

            <text y="15">black</text>
            <use x="70" y="10" xlinkHref="#Port" />
            <text y="35">{ props.fill }</text>
            <use x="70" y="30" xlinkHref="#Port" className="classA"/>
            <text y="55">blue</text>
            <use x="0" y="50" xlinkHref="#Port" style={{fill:'blue'}}/>
        </svg>
    );
}

工作Codepen演示

有关特定支持的更多详细信息,请检查支持的SVG属性的文档列表。 这是(现已关闭的)GitHub问题,该问题跟踪对命名空间SVG属性的支持。


先前的答案

您可以执行简单的SVG嵌入,而不必通过仅剥离名称空间属性来使用dangerouslySetInnerHTML地使用dangerouslySetInnerHTML 。 例如,这有效:

        render: function() {
            return (
                <svg viewBox="0 0 120 120">
                    <circle cx="60" cy="60" r="50"/>
                </svg>
            );
        }

在这一点上,您可以考虑添加诸如fill道具,或者其他可能对配置有用的道具。

回答2

如果只有一个要包含的静态svg字符串,则可以使用dangerouslySetInnerHTML

render: function() {
    return <span dangerouslySetInnerHTML={{__html: "<svg>...</svg>"}} />;
}

React将直接包含标记而不进行任何处理。

回答3

根据React开发人员的说法,您不需要名称空间xmlns。 如果您需要属性xlink:href ,则可以使用react 0.14中的xlinkHref

例子

Icon = (props) => {
  return <svg className="icon">
    <use xlinkHref={ '#' + props.name }></use>
  </svg>;
}
回答4

如果要从文件加载它,可以尝试使用React-inlinesvg-这非常简单明了。

import SVG from 'react-inlinesvg';

<SVG
  src="/path/to/myfile.svg"
  preloader={<Loader />}
  onLoad={(src) => {
    myOnLoadHandler(src);
  }}
>
  Here's some optional content for browsers that don't support XHR or inline
  SVGs. You can use other React components here too. Here, I'll show you.
  <img src="/path/to/myfile.png" />
</SVG>
回答5

您可以导入svg并将其像图像一样使用

import chatSVG from '../assets/images/undraw_typing_jie3.svg'

并在img标签中添加它

<img src={chatSVG} className='iconChat' alt="Icon chat"/>
回答6

有一个软件包可以为您转换它,并将svg作为字符串返回以实现到您的reactJS文件中。

https://www.npmjs.com/package/convert-svg-react

回答7

我发现的最好方法是这个网站

https://react-svgr.com/playground/

您复制了一个svg,它为您提供了一个react功能组件,其中svg已转换为react代码。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Embedding SVG into ReactJS
    Is is possible to embed SVG markup into a ReactJS component? render: function() { return ( <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ... </span> ); } Results in the error: Namespace attributes are not supported. ReactJSX is not XML. What is the lightest way of doing this. Using something like React ART is way overkill for what I'm trying to do.
  • SVG是否支持位图图像的嵌入?(Does SVG support embedding of bitmap images?)
    问题 SVG图像是纯矢量的,还是可以将位图图像组合成SVG图像? 如何将变换应用于位图图像(透视图,映射等)? 编辑:通过链接参考,图像可能包含在SVG中。 请参阅http://www.w3.org/TR/SVG/struct.html#ImageElement。 我的问题是,实际上是否可以将位图图像包含在svg中,以便svg图像是自包含的。 否则,无论何时显示svg图像,都必须遵循链接并下载图像。 显然.svg文件只是xml文件。 回答1 是的,您可以引用image元素中的任何图像。 而且,您可以使用数据URI来使SVG具有独立性。 一个例子: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> ... <image width="100" height="100" xlink:href="data:image/png;base64,IMAGE_DATA" /> ... </svg> 该svg元素属性xmlns:xlink声明xlink一个命名空间前缀,说这里的定义。 这样,SVG阅读器就可以知道xlink:href的含义。 IMAGE_DATA是您将图像数据添加为base64编码文本的位置。 支持SVG的矢量图形编辑器通常具有用于保存嵌入图像的选项。 否则
  • 作为Base64,将背景图像数据嵌入CSS是好做法还是坏做法?(Is embedding background image data into CSS as Base64 good or bad practice?)
    问题 我一直在查看lubricmonkey用户脚本的来源,并在他们的css中注意到以下内容: .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} 我可以理解,滑脂脚本希望将其可以捆绑的所有内容捆绑在源代码中,而不是将其托管在服务器上,这很明显。 但是由于我以前没有看过这种技术,因此我考虑了它的使用,并且由于许多原因,它似乎很有吸引力: 它将减少页面加载时的HTTP请求数量,从而提高性能如果没有CDN,则它将减少通过Cookie与图像一起发送而产生的流量可以缓存CSS文件 CSS文件可以是GZIPPED 考虑到IE6(例如)在背景图片缓存方面存在问题,这似乎不是最糟糕的主意... 那么,这是好事还是坏事,为什么您不使用它,以及将使用哪种工具对图像进行base64编码? 更新-测试结果 使用图片进行测试:http: //fragged.org/dev/map-shot.jpg
  • 使用reactjs渲染原始HTML(Rendering raw html with reactjs)
    问题 那么这是用reactjs渲染原始html的唯一方法吗? // http://facebook.github.io/react/docs/tutorial.html // tutorial7.js var converter = new Showdown.converter(); var Comment = React.createClass({ render: function() { var rawMarkup = converter.makeHtml(this.props.children.toString()); return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> <span dangerouslySetInnerHTML={{__html: rawMarkup}} /> </div> ); } }); 我知道有一些很酷的方法来用JSX标记内容,但是我主要感兴趣的是能够呈现原始html(包括所有类,内联样式等)。 像这样复杂的东西: <!-- http://getbootstrap.com/components/#dropdowns-example --> <div class="dropdown"> <button class="btn
  • 使用React内联样式设置backgroundImage(Setting a backgroundImage With React Inline Styles)
    问题 我正在尝试访问静态图像以在React的内联backgroundImage属性中使用。 不幸的是,我已经干了如何做到这一点。 通常,我以为您只是这样做如下: import Background from '../images/background_image.png'; var sectionStyle = { width: "100%", height: "400px", backgroundImage: "url(" + { Background } + ")" }; class Section extends Component { render() { return ( <section style={ sectionStyle }> </section> ); } } 这适用于<img>标签。 有人可以解释两者之间的区别吗? 例子: <img src={ Background } />很好用。 谢谢! 回答1 backgroundImage属性内的花括号是错误的。 可能您正在将webpack与图像文件加载器一起使用,因此Background应该已经是一个字符串: backgroundImage: "url(" + Background + ")" 您还可以使用以下ES6字符串模板来达到相同的效果: backgroundImage: `url(${Background}
  • 使用ReactJS将JWT存储在localStorage中是否安全?(Is it safe to store a JWT in localStorage with ReactJS?)
    问题 我目前正在使用ReactJS构建一个单页应用程序。 我读到,不使用localStorage的原因之一是由于XSS漏洞。 由于React会避开所有用户输入,因此使用localStorage现在安全吗? 回答1 在大多数现代单页应用程序中,我们确实必须将令牌存储在客户端的某个位置(最常见的用例-在页面刷新后使用户保持登录状态)。 共有2个可用选项:Web存储(会话存储,本地存储)和客户端cookie。 这两个选项都得到了广泛使用,但这并不意味着它们非常安全。 Tom Abbott很好地总结了JWT sessionStorage和localStorage的安全性: Web存储(localStorage / sessionStorage)可通过同一域上的JavaScript进行访问。 这意味着您网站上运行的所有JavaScript都可以访问Web存储,因此,它很容易受到跨站点脚本(XSS)攻击的攻击。 简而言之,XSS是攻击者可以注入将在您的页面上运行的JavaScript的一种漏洞。 基本的XSS攻击尝试通过表单输入注入JavaScript,攻击者在其中将<script>alert('You are Hacked');</script>放入表单中,以查看它是否由浏览器运行并且可以被其他用户查看。 为了防止XSS,常见的响应是对所有不受信任的数据进行转义和编码。 React(主要是
  • 如何在React中引用本地图像?(How do I reference a local image in React?)
    问题 如何从本地目录加载图像并将其包含在reactjs img src标签中? 我在与组件相同的文件夹中有一个名为one.jpeg的图像,并且在我的render函数中尝试了<img src="one.jpeg" />和<img src={"one.jpeg"} />但是图像未显示。 另外,由于该项目是使用官方的create-react-app命令行util create-react-app ,因此我无权访问webpack config文件。 更新:如果我首先import img from './one.jpeg'并在img src={img}使用它,则此方法有效,但是我要导入的图像文件太多,因此,我想在其中使用它们格式为img src={'image_name.jpeg'} 。 回答1 首先将src包装在{} 然后,如果使用Webpack; 代替: <img src={"./logo.jpeg"} /> 您可能需要使用require: <img src={require('./logo.jpeg')} /> 另一个选择是先导入图像,如下所示: import logo from './logo.jpeg'; // with import 或者 ... const logo = require('./logo.jpeg); // with require 然后插入... <img
  • 使用Apache POI将文件嵌入Excel(Embed files into Excel using Apache POI)
    问题 我正在使用Apache POI将数据导出到Excel文件。 出于一个怪异的要求,我需要使用此POI在Excel中嵌入一个文件。 我有文件,可以放入流中或作为字节数组。 搜寻了很长时间之后,我怀疑POI是否真的支持我的要求。 我们可以将文件嵌入Excel吗? :-( 干杯,阿努普 回答1 好的,这花了很长时间才最终解决,因为有些事情一开始看起来并不很重要,但是当它们没有正确设置时实际上损坏了文件-特别是在Ole10Native包装器中,它是其中的一部分unknown2字段实际上包含以下命令字符串的大小(以字节为单位)。 但首先要注意的是: 当您想将任意文件嵌入到Office格式之一时,最好的选择是使用OLE 1.0打包程序。 当您从文件中选择insert-> object时,通常会使用它。 因此,我重新设计了包含PPT的Excel 2003文件。 正如我在上面的评论中提到的,Excel将其嵌入式对象存储在名为“ MBD ....”的DirectoryNodes中。 如果是Ole 1.0 Packager对象,则会在\1Ole10Native条目中找到有趣的数据。 插入数据后,您需要以某种方式在Excel工作表中将其链接。 这由类似于图片条目的EscherObject完成,并带有附加的记录。 除了许多未记录的标志之外,还有一些使我感到困惑的事情:
  • 将HTML渲染到图像(Render HTML to an image)
    问题 有没有一种方法可以将html渲染为类似PNG的图像? 我知道画布是可能的,但我想呈现例如div之类的标准html元素。 回答1 有很多选择,它们各有利弊。 选项1:使用API ApiFlash(基于Chrome) EvoPDF(具有html的选项) Grabzit HTML / CSS到图像API ... 优点 执行Javascript 接近完美的渲染正确使用缓存选项时速度很快规模由API处理精确的时间,视口,... 大多数时候,他们提供免费计划 缺点 如果您打算大量使用它们,它不是免费的 选项2:使用众多可用库之一 图片到图片 wkhtmltoimage(包含在wkhtmltopdf工具中) IMGKit(用于ruby,基于wkhtmltoimage) imgkit(用于python并基于wkhtmltoimage) python-webkit2png ... 优点 在大多数情况下,转换速度都非常快 缺点 渲染效果不佳不执行javascript 不支持最新的Web功能(FlexBox,高级选择器,Webfonts,Box大小调整,媒体查询等) 有时安装起来不太容易规模复杂 选项3:使用PhantomJs以及包装器库 幻影 node-webshot(PhantomJs的javascript包装器库) ... 优点 执行Javascript 蛮快 缺点
  • (嵌入和)通过D3和/或javascript引用外部SVG((Embed and) Refer to an external SVG via D3 and/or javascript)
    问题 我有一个.svg文件,并希望将其嵌入到d3图形的svg结构中。 我还需要通过某些g元素的ID引用附加到g元素的所有路径/多边形。 我尝试了不同的方法来嵌入和引用svg(g),但由于某些原因而无法使用: (1)第一次尝试 // Firefox displays my svg but when i open it with Chrome the svg //is not displayed (just default placeholder icon) // I can't reference the svg-g id's with d3.select functions. main_chart_svg .append("svg:image") .attr("xlink:href", "mySVGpicture.svg") .attr("x", "50") .attr("y", "50") .attr("width", "500") .attr("height", "500"); main_chart_svg.select("#anIdWhichIsInTheSvgFile").remove(); //// This doesn't work (2)第二次尝试 // This displays the svg but -not- inside my main-chart-svg
  • 如何将样式应用于嵌入式SVG?(How to apply a style to an embedded SVG?)
    问题 使用<svg>标签将SVG直接包含在文档中时,可以通过文档的样式表将CSS样式应用于SVG。 但是,我试图将一种样式应用于嵌入的SVG(使用<object>标记)。 是否可以使用以下代码? object svg { fill: #fff; } 回答1 简短的回答:不,因为样式不适用于文档边界。 但是,由于具有<object>标记,因此可以使用脚本将样式表插入svg文档。 像这样,请注意,此代码假定<object>已完全加载: var svgDoc = yourObjectElement.contentDocument; var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style"); styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here svgDoc.getElementById("where-to-insert").appendChild(styleElement); 也可以插入<link>元素以引用外部样式表: var svgDoc = yourObjectElement.contentDocument; var linkElm = svgDoc
  • 链接到由IMG标签嵌入的SVG中的CSS(Linking to CSS in an SVG embedded by an IMG tag)
    问题 我有一个页面,其中包含几个SVG文件。 为了同步那些SVG文件的样式,我想创建一个样式表来保存所有样式信息。 但是,当包含如下所示的SVG时,将不会应用CSS。 任何对此有解决方案的人,或者就是不可能链接到<img src="..." />引用的SVG中的其他(CSS)文件吗? 请参见下面的示例代码。 直接在浏览器中加载pic.svg ,将应用所有样式,并且可以看到一个绿色矩形。 但是,当打开page.htm时,所看到的只是一个黑色矩形。 因此,显然没有应用任何定义的样式。 page.htm <!DOCTYPE html> <html> <body> <img src="pic.svg" style="width: 100px; height: 100px;" /> </body> </html> 图片 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <?xml-stylesheet type="text/css" href="styles.css" ?> <svg version="1.1" xmlns="http://www.w3.org/2000
  • 如何打开/关闭ReactJS的“开发模式”?(How to turn on/off ReactJS 'development mode'?)
    问题 开始使用ReactJS的prop验证功能,正如文档所说,出于性能原因,该功能仅在“开发模式”下有效。 React似乎正在验证我注释的特定组件的属性,但是我不记得显式打开“开发模式”。 我尝试搜索如何触发/切换开发模式,但是没有任何运气。 回答1 对方的回答假设您使用外部预建的文件从反应,而正确的,是大多数人不会如何去或要消耗作出反应,一个包。 而且,在这一点上,大多数每个React库和包都还依赖于相同的约定来在生产期间关闭开发人员时间助手。 仅使用缩小的反应,所有这些潜在的优化也将留在桌面上。 最终,魔术归结为React在整个代码库中嵌入对process.env.NODE_ENV引用; 这些就像功能切换一样。 if (process.env.NODE_ENV !== "production") // do propType checks 上面是最常见的模式,其他库也遵循它。 因此,要“禁用”这些检查,我们需要将NODE_ENV切换为"production" 禁用“开发模式”的正确方法是通过选择的捆绑程序。 网页包 使用webpack配置中的DefinePlugin,如下所示: new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }) 浏览器 使用Envify转换
  • ReactJS-每次调用“ setState”时,渲染都被调用吗?(ReactJS - Does render get called any time “setState” is called?)
    问题 每当调用setState()时,React都会重新渲染所有组件和子组件吗? 如果是这样,为什么? 我以为这个想法是,当状态改变时,React只渲染所需的内容。 在下面的简单示例中,尽管onClick处理程序始终将state设置为相同的值,但是在随后的单击中状态不会改变,这两个类在单击文本时都再次呈现: this.setState({'test':'me'}); 我曾希望只有在state数据已更改的情况state才会进行渲染。 这是该示例的代码,作为JS小提琴和嵌入式代码段: var TimeInChild = React.createClass({ render: function() { var t = new Date().getTime(); return ( <p>Time in child:{t}</p> ); } }); var Main = React.createClass({ onTest: function() { this.setState({'test':'me'}); }, render: function() { var currentTime = new Date().getTime(); return ( <div onClick={this.onTest}> <p>Time in main:{currentTime}</p> <p>Click
  • 如何计算圆弧的SVG路径(How to calculate the SVG Path for an arc (of a circle))
    问题 给定一个以(200,200)为中心,半径为25的圆,如何绘制从270度到135度的圆弧以及从270度到45度的圆弧? 0度表示在x轴的右侧(右侧)(表示3点钟位置)270度表示在12点钟位置,90表示在6点钟位置 更一般而言,圆弧的一部分圆弧的路径是什么 x, y, r, d1, d2, direction 意义 center (x,y), radius r, degree_start, degree_end, direction 回答1 扩展@wdebeaum的好答案,这是一种生成弧形路径的方法: function polarToCartesian(centerX, centerY, radius, angleInDegrees) { var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) }; } function describeArc(x, y, radius, startAngle, endAngle){ var start = polarToCartesian(x, y, radius
  • Does SVG support embedding of bitmap images?
    Is an SVG image purely vectorial or can we combine bitmap images into an SVG image ? How about transforms applied on the bitmap images (perspective, mappings, etc.) ? Edit: Images may be included in an SVG by link reference. See http://www.w3.org/TR/SVG/struct.html#ImageElement. My question was in fact if bitmap images may be included inside the svg so that the svg image would be self contained. Otherwise, whenever the svg image is displayed the link must be followed and the image downloaded. Apparently .svg files are simply xml files.
  • SVG图像中的跨浏览器嵌入式字体(Cross-browser embedded font in svg image)
    问题 标题模棱两可; 让我澄清一下:我有一个svg图像,其中包含要使用自定义字体呈现的文本。 但是,似乎有些新问题在html页面中嵌入字体时不会弹出。 另外,某些浏览器(即Firefox)似乎对页面内svg(“在img标签中”)的处理方式与直接呈现svg时的处理方式不同。 <defs> <style> @font-face { font-family: "Open Sans"; src: local("Open Sans"), local("OpenSans"), url('https://example.com/OpenSans-Regular.eot') format('eot'), url('https://example.com/OpenSans-Regular.woff') format('woff'), url('https://example.com/OpenSans-Regular.ttf') format('truetype'); } /* ... 据我所知,如果这是一个网页,它将可以在几乎所有地方成功呈现。 但是,作为svg,我无法使其正常运行。 当前格式几乎可以在所有地方工作,但IE10(以及可能是较旧的版本)除外:字体有时会加载,而其他时候则不会。 从字面上看,每秒刷新都使用系统后备字体。 可以将woff文件内联作为base64编码文件包含在内
  • 是否需要诸如“ xmlns”和“ version”之类的SVG参数?(Are SVG parameters such as 'xmlns' and 'version' needed?)
    问题 在网上看到的svg示例中,大约有一半是将代码包装在简单的<svg></svg>标签中。 在另一半中,svg标记具有许多复杂的属性,如下所示: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> 我的问题是:可以使用简单的svg标签吗? 我尝试过处理那些复杂的对象,如果不包含它们的话,一切都会正常进行。 回答1 所有用户代理(浏览器)都忽略版本属性,因此您可以随时删除该属性。 如果将SVG内联嵌入HTML页面并将该页面用作text/html则不需要xmlns属性。 将SVG内联嵌入HTML文档是HTML5的一部分,是一项相当新的创新。 但是,如果将页面作为image / svg + xml或application / xhtml + xml或任何其他导致用户代理使用XML解析器的MIME类型提供,则xmlns属性是必需的。 直到最近,这是唯一的做事方式,因此有很多这样的内容。 回答2 xmlns="http://www.w3.org/2000/svg"属性为: 图片/ svg + xml文件必需。 1个对于内联<svg>可选的。 2个 xmlns:xlink="http://www.w3.org/1999/xlink"属性为:
  • 如何使用其父容器制作svg秤?(How can I make an svg scale with its parent container?)
    问题 当大小为非本机时,我希望有一个内联svg元素的内容比例。 当然,我可以将其作为单独的文件并像这样进行缩放。 index.html: <img src="foo.svg" style="width: 100%;" /> <img src="foo.svg" style="width: 100%;" /> foo.svg: <svg width="123" height="456"></svg> 但是,我想通过CSS向SVG添加其他样式,因此链接外部样式不是一种选择。 如何制作嵌入式SVG秤? 回答1 要独立于SVG图像的缩放大小指定SVG图像内的坐标,请使用SVG元素上的viewBox属性来定义图像在坐标系中的边界框,并使用width和height属性定义相对于包含页面的宽度或高度。 例如,如果您具有以下条件: <svg> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg> 它将呈现为10px x 20px的三角形: 现在,如果仅设置宽度和高度,则将更改SVG元素的大小,但不会缩放三角形: <svg width=100 height=50> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg> 如果设置了视图框
  • SVG USE元素和:hover样式(SVG USE element and :hover style)
    问题 我正在尝试使用CSS :hover伪类通过<use>标记来设置从<defs>嵌入的SVG元素的样式,但是它似乎不起作用:-/这是我的代码: <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/> <style type="text/css" media="screen"> .active { fill: #0BE; } .active:hover { opacity: 0.8; stroke: #F0F; stroke-width: 4px; } .active2 #p2 { fill: #0BE; } .active2:hover #p2 { opacity: 0.8; stroke: #F0F; stroke-width: 4px; } #p2:hover { opacity: 0.8; stroke: #F0F; stroke-width: 4px; } </style> </head> <body> <svg version="1.1" width="640" height="480" xmlns=