xslt,svg , XSLT conditional template match on two attributes


XSLT conditional template match on two attributes

Question:

Tag: xslt,svg

I have to parse this SVG and apply some transformations:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="540pt" height="263pt" viewBox="0 0 540 263" version="1.1">
    <g id="surface1">
        ...
        <path style=" stroke:black;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 270 67.160156 L 270.238281 67.640625 L 277.679688 67.640625 "/>
        <path style=" stroke:black;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 270.238281 67.640625 L 271.199219 68.839844 L 285.359375 68.839844 "/>
        <path style=" stroke:black;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 270.238281 67.640625 L 277.679688 67.640625 L 285.359375 68.839844 "/>
        <path style=" stroke:black;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 271.199219 68.839844 L 272.878906 71.238281 L 293.039062 71.238281 "/>
        <path style=" stroke:black;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 271.199219 68.839844 L 285.359375 68.839844 L 293.039062 71.238281 "/>
        <path style=" stroke:black;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 272.878906 71.238281 L 275.28125 74.601562 L 300 74.601562 "/>
        ...
    </g>
</svg>

I need a template that matches the path elements where the style attribute contains the string fill:rgb(0%,0%,0%) and the d attribute contains two times the letter L. Here is what I got:

<xsl:template match="@style[contains(., 'fill:rgb(0%,0%,0%)')] and @d[string-length() - string-length(translate(., 'L', '')) = 2]">
    <xsl:attribute name="d">
        <xsl:value-of select="."/>
        <xsl:text>Z</xsl:text>
    </xsl:attribute>
</xsl:template>

It seems that each condition alone works, but when together, it doesn't.

<xsl:template match="@style[contains(., 'fill:rgb(0%,0%,0%)')]">
    <xsl:attribute name="d">
        <xsl:value-of select="."/>
        <xsl:text>Z</xsl:text>
    </xsl:attribute>
</xsl:template>

and

<xsl:template match="@d[string-length() - string-length(translate(., 'L', '')) = 2]">
    <xsl:attribute name="d">
        <xsl:value-of select="."/>
        <xsl:text>Z</xsl:text>
    </xsl:attribute>
</xsl:template>

Also, a match on the path element doesn't seem to work...

<xsl:template match="path">
    <xsl:attribute name="d">
        <xsl:value-of select="."/>
        <xsl:text>Z</xsl:text>
    </xsl:attribute>
</xsl:template>

Here is the full transformation file. The problem seems to be the match on the path element.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml"/>

    <xsl:param name="stroke">black</xsl:param>
    <xsl:param name="stroke-width">50px</xsl:param>

    <xsl:template match="*">
        <xsl:copy>
            <xsl:apply-templates select="@*|text()|*"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="path[@style[contains(., 'fill:rgb(0%,0%,0%)')] and @d[string-length() - string-length(translate(., 'L', '')) = 2]]">
        <xsl:attribute name="d">
            <xsl:value-of select="."/>
            <xsl:text>Z</xsl:text>
        </xsl:attribute>
    </xsl:template>

    <xsl:template match="@*|text()">
        <xsl:copy/>
    </xsl:template>

</xsl:stylesheet>

The expected result should be (notice the letter Z appended to the d attribute):

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="540pt" height="263pt" viewBox="0 0 540 263" version="1.1">
    <g id="surface1">
        ...
        <path style=" stroke:black;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 270 67.160156 L 270.238281 67.640625 L 277.679688 67.640625 Z"/>
        <path style=" stroke:black;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 270.238281 67.640625 L 271.199219 68.839844 L 285.359375 68.839844 Z"/>
        <path style=" stroke:black;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 270.238281 67.640625 L 277.679688 67.640625 L 285.359375 68.839844 Z"/>
        <path style=" stroke:black;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 271.199219 68.839844 L 272.878906 71.238281 L 293.039062 71.238281 Z"/>
        <path style=" stroke:black;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 271.199219 68.839844 L 285.359375 68.839844 L 293.039062 71.238281 Z"/>
        <path style=" stroke:black;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 272.878906 71.238281 L 275.28125 74.601562 L 300 74.601562 Z"/>
        ...
    </g>
</svg>

Answer:

The first problem you have got is with namespaces. The elements in your XML input are part of a namespace

<svg xmlns="http://www.w3.org/2000/svg"

This means you need to reference that namespace in your XSLT too....

<xsl:stylesheet version="1.0"    
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:svg="http://www.w3.org/2000/svg">

Then you use this prefix in a template match

<xsl:template match="svg:path">

Now, you actually want to match the d attribute here, so your template would look like this

<xsl:template match="svg:path[contains(@style, 'fill:rgb(0%,0%,0%)')]
     /@d[string-length() - string-length(translate(., 'L', '')) = 2]">
    <xsl:attribute name="d">
        <xsl:value-of select="."/>
        <xsl:text>Z</xsl:text>
    </xsl:attribute>
</xsl:template>

Related:


SVG animation not repeating properly


svg,svg-animate,smil
I am having some difficulty getting my SVG icons to repeat properly. I need them to repeat like a gif, individually and indefinitely. I can get only two to work but I need all three to repeat one after the other. Here is a js fiddle of the SVG animation...

Svg set new coordinates with animation on 2 lines simultaneously


jquery,html,css,css3,svg
I need a way (with CSS3 or jQuery) to change this SVG shape from X to ↓ (Down arrow). I tried more ways but i still have problems. My basic idea is to get lines with id (svg_5, svg_6) and make these the head of my arrow. $('a').click(function (e) {...

How to manipulate existing group elements with Snap.svg


javascript,svg,snap.svg
We have an existing svg-document in witch we want to replace a group-element with a new one. Is it possible to do with Snap.svg? var oldGroup = Snap.select("[id='" + oldGroupId + "']"); oldGroup.outerSVG(newGroup); //This is what I want to do but outerSVG is readonly ...

d3.js grid moving around when dragging and zooming


javascript,svg,d3.js,gridlines
I tried to copy the behavior of the grid displayed here. The code I have is here Problem is, when I'm dragging or zooming, the grid is moving along with everything else, while it should not. I suspect the problem is around this part : function zoomed() { svg.select(".x.axis").call(xAxis); svg.select(".y.axis").call(yAxis);...

Equivalent of canvas quadraticCurveTo in SVG


javascript,jquery,canvas,svg,bezier-curve
I am working on a plugin to allow "natural looking" signatures to be drawn using mouse or touch. When confirmed by the user, the result will be a stored SVG that can then be displayed in place of the "Click to sign" button. The attached JSFiddle http://jsfiddle.net/TrueBlueAussie/67haj4nt/3/ shows a testbed...

Snap SVG Iterate over Object to build Animate properties


javascript,svg,snap.svg
I'm looking to write a function involving Snap SVG that would allow me to pass in an object or array of values through which I can iterate to build the animation properties. For example, if I could pass: [transform: 't100,100', transform: 'r10,10,10'] Into this: animateElementWithSnap: function(element, parentSVG, animationValues, duration, easing)...

Selecting data in XSL from different sections of XML


xml,xslt
I am new to XSLT. I have an XML- <root> <fiberList> <fiber> <A>abcd</A> <B>bcde</B> <C>cdef</C> </fiber> </fiberList> <generatorList> <generator> <D>defg</D> <E>efgh</E> </generator> </root> I want to transform this XML into another XML through XSL. The resulting XML should be something like this- <parent> <child> <M>abcd</M> <N>bcde</N> <O>efgh</O> </child> </parent> But...

Animate dots or points from an offset to their actual position


jquery,html,css,html5,svg
How can I do the animation by using SVG or CSS? Animation should be like below: Initially, only lines will be visible(picture 1), after 2 seconds dots (.) will come and join to the line curves(picture 2) with some animation to the dots. Online Example Please check the code below...

apply-templates based on attribute id value


xslt
My XML is as below <?xml version="1.0" encoding="UTF-8"?> <product> <admin id="1"> <name>abc</name> </admin> <admin id="2"> <name>kkk</name> </admin> <product> Here is my XSLT <xsl:template match="product"> <ul> <xsl:apply-templates select="admin"/> </ul> I want to apply templates on "admin" based on attribute id value. How to apply templates based on attribute value? New question......

javascript node module.exports / require() code on the front-end


javascript,node.js,svg,browserify
I've been looking into using a library such as SVGO to be able to clean user submitted SVG code on the front end. SVGO is a node.js based library which typically works on the back end, so I've been trying to wrap my head around how to go about sending...

XSL-FO table-cell with superscript and vertical alignment


html,xml,xslt,xsl-fo
This is the situation: I am converting html to xsl-fo to pdf. I am displaying a heading text like "4.4.1. [Header Text]" by use of a table, because it might happen that the [Header Text] is quite long and in that case shall wrap onto the next line like so:...

Adding a child attribute to the parent element in xslt 1.0


xml,xslt,xpath,xslt-1.0
I have multiple elements that contain an uniqueId(generated and stored in a variable). I have recursively added the element(object class=Bundle with unique id ) with the xsl as follows <xsl:template match="visualChildren"> <object class="Set" > <installChildren> <xsl:call-template name="Bundle"> <xsl:with-param name="i" select="1"/> <xsl:with-param name="limit" select="4" /> </xsl:call-template> </installChildren> </object> </xsl:template> <xsl:template name="Bundle">...

Responsive axis with percentage coordinates


javascript,svg,d3.js,graph,charts
In an attempt to build a responsive scatter graph with d3.js, I'm using %-based coordinates in a 100% x 100% svg element. How can I .call(axis) and get it to layout the axis using % and not px values, so that they always fit the svg and the plotted data?...

XSLT for-each statement not iterating proper amount of times


xml,xslt
I am having trouble with my XSLT for-each statements. When I run the XML through the XSLT, it only comes up with the first iteration of the list, and then stops. It doesn't post the values either. Here is the XML code. <?xml version="1.0" encoding="UTF-8"?> <template> <L> <Q>Hey</Q> <Q>There</Q> <Q>Thank...

Javascript D3.js drag a chart out of its svg Element


javascript,svg,d3.js
I want to make chart, that you can not drag out of its svg element. I'm doing this at the moment like this jsfiddle As you can see, you can zoom and drag this freely. What i want is this: If you drag it for example to the right and...

How to get xml Nodes which are in lower case using XSLT 1.0


xml,xslt,xpath,xslt-1.0
I need to get XML nodes which are in lower case and values of it using XSLT 1.0 and display the output as XML <main> <ACAT>Cat Name A </ACAT> <bcat>Cat Name b </bcat> <ccat>Cat Name c </ccat> <dcat>Cat Name d </dcat> <ECAT>Cat Name E </ECAT> <fcat>Cat Name f </fcat> </main>...

XSLT How to remove style from div and td tags


xml,xslt
I am new to XSLT. I got stuck while removing style attributes from div, td or li tags. Input XML: <?xml version="1.0" encoding="UTF-8"?> <div xmlns="http://www.w3.org/1999/xhtml"> <table style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; WIDTH: 606px; BORDER-COLLAPSE: collapse; WORD-WRAP: break-word; TABLE-LAYOUT: fixed; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class="MsoNormalTable msoUcTable" tabIndex="-1" border="1"...

Split XML into multiple files using xslt on string length


xml,xslt,xslt-2.0
I'm looking at trying to split an XML file into 2 separate files. They have to be split on the length of a string in a particular element. I've been attempting to use the <xsl:for-each-group> and <xsl:result-document> elements in order to do this but only get the 1st matching 'object'...

Snap SVG .animate callback fires immediately


javascript,jquery,animation,svg,snap.svg
I am trying to pass a set of arguments to an animate function within Snap SVG including a callback function. However, the callback (in this case is to remove the element) fires immediately on click and not after the animation has completed. As it is now, the element is removed...

How can I save my generated svg code to a .svg file in the client machine?


javascript,svg,snap.svg
I used snap.svg library to generate, with javascript, a svg element in my asp.net web form page by loading other external .svg files and manipulating them in order to get the final svg element. Once the composition of the desired svg object is finish and the resulting svg element shows...

Remove XML Node text using XSLT


xml,xslt,xslt-2.0
I need to modify xml document with XSLT. what I need is to remove some node name from xml document. Example: <link ref="www.facebook.com"> <c type="Hyperlink">www.facebook.com<c> </link> I need to convert this xml as follows (remove the <c> node and attribute form xml), <link ref="www.facebook.com"> www.facebook.com </link> I tried to do...

Transform XML to another XML using XSL based on some condition


xml,xslt
I have an XML - <root> <gereratorList> <generator> <id>1</id> <A>123</A> </generator> <generator> <id>10</id> <A>456</A> </generator> <generator> <id>111</id> <A>789</A> </generator> </gereratorList> </root> I want to transform this XML into another XML through XSL. The resulting XML should be something like this - <parent> <child> <test>456</test> <child> </parent> But I am...

XSLT filePath with document as variable


variables,xslt,filepath
I try to use a variable in the filePath, but it isn't working: BodyPart filePath="C:\\FileOutEmail\\($vpDocNr).xml" content-type="" content-id="" content-disposition="" multipart-type="" I also tried with the whole path in a variable without results: BodyPart filePath='$bestand' content-type="" content-id="" content-disposition="" multipart-type="" Is this possible, what is the right syntax?...

Is it possible to preprocess xml source within the same XSLT Stylesheet?


xslt,xslt-2.0
Within the same XSLT (2.0) Stylesheet and transformation I would like to: 1) first preprocess the whole XML Datasource (Add a attribute with a specific calculation to certain elements) and then 2: transform the changed XML Datasource with the sylesheet's templates. How can I achieve this? A code example would...

Dynamic inclusion of javascript in SVG by means of server side filtering inside apache server


javascript,apache,svg,piwik
Years back I wrote some code to automatically include some javascript code inside html pages delivered by an http server. The approach is documented here in a blog entry and in this StackOverflow question. The solution served me well over the last years. The approach in two sentences: for every...

Svg how to position elements lo left and right like with floats?


javascript,svg,d3.js
I'm building a organizational chart with the help of dagre-d3,js and d3.js. Its svg based so every person in the chart needs to have some kind of a employee card (or call it profile card) This card needs to show the Persons name, his group and have 2 buttons, one...

html2canvas does not print jsPlumb Connectors


svg,jsplumb,html2canvas
How to print SVG elements that are built by jsPlumb. Known that getting all SVG Elements drawen by jsPlumb is retrieved by this code : var uiJsPlumbConnectors=jsPlumb.getAllConnections().map(function(conn){return conn.canvas;}) All connectors are SVG elements : Using html2canvas to print all connectors (SVG), it does not work : html2canvas(uiJsPlumbConnectors).then(function(c){ window.open(c.toDataURL('image/png')) }); An...

XSLT insert sibling if it doesn't exist - Not being rerunnable for some reason


xml,xslt,xpath
I'm trying to add a sibling to an element only if it doesn't exist. Here's my XML: <?xml version='1.0' encoding='UTF-8'?> <domain xmlns="http://xmlns.oracle.com/weblogic/domain" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.oracle.com/weblogic/security/xacml http://xmlns.oracle.com/weblogic/security/xacml/1.0/xacml.xsd http://xmlns.oracle.com/weblogic/security/providers/passwordvalidator...

How to calculate max string-length of a node-set?


xml,xslt,xslt-1.0,libxslt
I am trying to use XSLT to turn an XML document into plain text tables for human consumption. I am using xsltproc, which only implements XSLT 1.0 (so max is from EXSLT actually). I tried the below, but the commented-out definition fails because string-length returns only a single value (the...

How do I load SVGs directly in my React component using webpack?


svg,icons,reactjs,loader,webpack
I would like to render a material design icon directly in my NextButton component using webpack. Here's the relevant part of my code: var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg'); var NextButton = React.createClass({ render: function() { return ( <Link to={this.props.target} className='button--next'> {this.props.label} {NextIcon} </Link> ) } }); But this isn't working as...

Trying to fill a SVG map from wordpress custom categories


wordpress,dictionary,svg
I've created a custom post_type (destinations) with a category (locations) to provide a tree structure for my SVG map: Continent/Country/Town Example locations: Europe/Germany/Berlin/POST Europe/Italiy/Sicily/POST North-Africa/Morocco/Marrakech/POST My plan was to fill the map by the country short codes like (DE for Germany, IT for Italia, LY for Libya (...). Here is...

Convert meters to foot in xml data via xsl transformation


xml,xslt,openstreetmap
I would like to modify my xml file by converting some values ([email protected]) from meter to foot. I am a newbie to xml and this should be no problem for one of you. The formular is: 1 meter are 3.2808 feet I want to convert the attribute value of node/[email protected]

About sorting based on the counting of subelements


xml,xslt
i have an xml document with properties that belong to agencies: <agency name="Century 42" num="Century42" mail="[email protected]"/> <property agency="Century42" ....> ... I would like to print the info of all agencies. The agencies should be sorted by the number of properties that they own. I tried this but it does not...

XSL - iterate through elements and update based on the node index from another xml file


xml,xslt
I have an XML file with multiple Shape elements each with a child Material element that contains a Code attribute. I want to update the Code attribute for each Material element based on a value that is obtained from a separate XML file. The problem I have is that the...

Creating SVG elements dynamically


javascript,svg,d3.js
I am trying to create some circles in d3js dynamically, But for some reason it fails. My requirement is to show two small circles on the rectangle when I hover the rectangle. on the mouse out event circles should hide. I tried to it by creating a rect object and...

Cyrllic characters in SVG font


javascript,svg,unicode,encoding,fonts
You will have to bear with me with this, as I know very little about encodings so may be asking something very simple/obvious. I am working with some SVG fonts in browser-side Javascript and I need to pull out some information on Cyrillic characters grammatically. I am doing this currently...

ProcessBuilder or Runtime.getRuntime().exec won't complete jar execution


java,xml,xslt,cmd,processbuilder
I have a jar which converts one XML to other XML format using XSLT in Java. The jar copies the output to some folder. It is working absolutely fine when am running it on command prompt but running it via Runtime.getRuntime().exec or ProcessBuilder, doesn't complete the process. Just 25 files...

XslCompiledTransform Transform Method Not Working


c#,xml,xslt,transform
I have a below xslt file. <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ds="http://www.w3.org/2000/09/xmldsig#" xmlns:fn="http://www.w3.org/2005/xpath-functions" xmlns:gl-bus="http://www.xbrl.org/int/gl/bus/2006-10-25" xmlns:gl-cor="http://www.xbrl.org/int/gl/cor/2006-10-25" xmlns:gl-gen="http://www.xbrl.org/int/gl/gen/2006-10-25" xmlns:iso4217="http://www.xbrl.org/2003/iso4217" xmlns:link="http://www.xbrl.org/2003/linkbase"...

how to define html5 svg polygon points to create graphics


html,html5,svg
Hi i am trying to find out how to define the points for a polygon in HTML5 <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> this will end up creating a Star image. i tried to remove some points and add some arbitrary points and it...

XSLT get all nodes with text


xml,xslt
I'm trying to loop through all nodes with text in my document from a certain location. <xsl:template name="interpret_text"> <xsl:param name="location"/> <xsl:for-each select="$location//text()"> <xsl:choose> <xsl:when test="name(.) = tag_im_looking_for"> <!-- various code stuff and closing tags --> This code is functional except you may notice my problem. When I enter the for-each...

group siblings by identifying the first node of a certain type in sequence


xml,xslt,xpath
Not sure if that description is the best...but given this xml: <?xml version="1.0"?> <root> <type1 num="1" first="1"/> <type1 num="2" /> <type2 num="3" /> <type2 num="4" /> <type1 num="5" first="2"/> <type1 num="6" /> <type2 num="7" /> <type2 num="8" /> <type1 num="9" first="3"/> <type1 num="10" /> <type2 num="11" /> <type2 num="12" />...

removing a parent node dependig upon child node using xslt


xml,xslt
i am looking forwar for an template that removes anode from xml depending upon the value of a chid node,basically i am having an xml like: <EventInfo> <AssignmentEvent> <CreateDateTime>2015-06-02T00:00:00+02:00</CreateDateTime> </AssignmentEvent> <EstimateEvent> <CreateDateTime>2015-06-02T07:38:28.0000000Z</CreateDateTime> <CommitDateTime>2015-06-04T14:29:38.0000000Z</CommitDateTime> <UploadDateTime>2015-06-04T14:29:39.7651796Z</UploadDateTime>...

adding link_to with image_tag and image path both


html,ruby-on-rails,image,ruby-on-rails-4,svg
I am trying to replace the tag with link_to in my rails application view. for replacing I have svg icon, text and link all in one tag. Here is below <a class="navbar-brand" href="index.html"><%= image_tag 'logo.svg', "data-svg-fallback" => image_path('logo.svg'), :align=> "left" ,:style => "padding-right: 5px;" %> My Project </a> but I...

XML, XSL namespaces


xml,xslt,namespaces
I'm new to XML especially namespaces. I made all the documents and everything seems to work fine, but I don't know whether I'm really using namespaces (which is requirement). Except that my html file are not valid because off this: "Attribute xmlns:xsi not allowed here." and "Attribute xmlns:xslformatting not allowed...

XQuery XML insert


xml,xslt,xquery,transformation,osb
I have XML based target data: <myTargetData> <myMap> <pairs> <key>KEY_1</key> <value> <myMap> <pairs> <key>INNER_KEY_1</key> <value/> </pairs> <pairs> <key>INNER_KEY_2</key> <value/> </pairs> <pairs> <key>INNER_KEY_3</key> <value> <myMap> <pairs> <key>INNER_INNER_KEY_1</key> <value/> </pairs> <pairs> <key>INNER_INNER_KEY_2</key> <value/>...

XSL transformation outputting multiple times and other confusion


xml,xslt,xpath
I'm attempting to transform a section of an XML document (which is mostly HTML) with a templated piece of markup should a particular pattern be matched. I'm inexperienced with XSLT (I've only used xpath, really) and online documentation is sparse so I'm struggling with it... To the following XML document:...

XML-XSLT-XPATH : How to convert multiple XML elements to a string, separated by semicolon


xml,xslt,xpath,xslt-2.0
I have just demonstrated my question as an input and output format as below. I have an input as xml document which consist of following data <Users> <user> <name>Mark Curtain</name> <email>[email protected]</email> <username>mark</username> </user> <user> <name>Zuke Gossip</name> <email>[email protected]</email> <username>zuke</username> </user> <user> <name>Villan Kiosk</name> <email>[email protected]</email>...

Get Angular to action ng-if in new elements generated by d3.js


javascript,angularjs,svg,d3.js,angularjs-directive
I am generating a series of <circle ng-if='n'> someScopeFunction()' \> with d3.js How can I get Angular to notice and work on these new elements and ng-ifs? And how can I get it to do so with angular variables, e.g. <circle some-attr='{{i - 2}}' />...

my svg polygons fills are not changing color on hover


jquery,css,svg
I have some svg polygons. When you mouse over a polygon, I want to find part of the polygon's id, then change the fill color of all polygons that have that part of the polygon id in their id. But it isn't working. No polygon fill is changing. Anyone know...

Center Aligning an SVG element?


svg,path
I don't know how to really explain this but how can I center align this logo http://jsfiddle.net/fa7w3h99/3/ I have tried the following but it didnt seem to work as intended. .center-logo { display: block; margin: auto; } ...