none
linear gradient

    Question

  • I've been following many examples for creating a linear gradient using XSL, but for some reason, I've not been able to accomplish this task.  All the examples seem pretty straightforward, but I'm not able to get the color applied.

    Below is my XSL for the gradient.

    	<xsl:template name="svg-defs">
          <svg height="100%" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
              <linearGradient id="SFPurple"
                              x1="0%" y1="0%"
                              x2="100%" y2="0%"
                              spreadMethod="pad">
                <stop offset="10%" stop-color="#F2EFFB" stop-opacity="5"/>
                <stop offset="100%" stop-color="#240B3B" stop-opacity="5"/>
              </linearGradient>
            </defs>
            <h1 height="50px" width="100%" style="fill:url(#SFPurple);">
              Some<span style="font-style:italic;">Text</span> Here
            </h1>
          </svg>
    	</xsl:template>
    

    If I use one of the stop colors for the background, I.E. style="background:#F2EFFB", then I get that color, but the fill:url(#F2EFFB) doesn't seem to work for me at all.

    Any suggestions would be greatly appreciated.

    TIA,

    Chris

    Tuesday, December 13, 2011 6:14 AM

Answers

All replies

  • I am not sure using the SVG "fill" on HTML elements is something that is supposed to work. What is possible nowadays is using an SVG graphics as the background-image of an HTML element, as in http://home.arcor.de/martin.honnen/html/test2011121301.html. One way not to use a separate SVG file is using a data: URL: http://home.arcor.de/martin.honnen/html/test2011121302.html.

    There is however by now also a possibility to define gradients with CSS: https://developer.mozilla.org/en/CSS/Using_CSS_gradients. However IE so far supports that only with the IE 10 preview releases I think (and of course then with CSS properties requiring an -ms prefix).


    MVP Data Platform Development My blog
    • Edited by Martin Honnen Tuesday, December 13, 2011 12:00 PM improving grammar
    • Marked as answer by Chris Fo Thursday, December 22, 2011 11:42 PM
    Tuesday, December 13, 2011 11:57 AM
  • Thank you for that information.  I didn't find info like that, when I was reading about adding gradients.  The XSL Stylesheet doesn't seem to like it, though.  If I place the source code from your tests into an HTML file, then I can see the gradient, but including it in my stylesheet doesn't produce the same results.

    Here is what I did:

    		<html>
    			<head>
    				<style type="text/css">
              body 	{margin-left: 20px; font-family: segoe ui, tahoma, sans-serif;}
              h1	{text-shadow: -3px 0 4px #006; font-family:sans-Serif; text-align: center;}
              h2	{size: 70%; color: #347C17;}
              h3	{size: 70%; color: #C11B17;}
              td	{padding-right: 10px;}
              p.grad {
              background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4NTMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0UzQTgyMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzg1MykiIC8+Cjwvc3ZnPg==);
              }
            </style>
    			</head>
    		</html>
    <!--
    		<xsl:call-template name="svg-defs">
    		</xsl:call-template>
    		-->
          <p class="grad">
            This is a test.
          </p>
        
    		<hr />
    

    I'll play around with this and read some more, when I get into the office.

    Tuesday, December 13, 2011 2:18 PM
  • Sorry, I can't tell from that snippet what goes wrong. I tried to adapt the previous HTML example into short samples applying client-side XSLT, the first one is http://home.arcor.de/martin.honnen/html/test2011121301.xml, the second is http://home.arcor.de/martin.honnen/html/test2011121302.xml. IE 9 and Chrome and Firefox render that gradient background-image the same way they do in the previous static HTML sample. There is a difference between Firefox on one hand and IE 9 and Chrome on the other hand, namely that Firefox does not size the background-image to the complete dimensions of the HTML "p" element, but that difference is unfortunately already present in the static HTML example.
    MVP Data Platform Development My blog
    • Marked as answer by Chris Fo Thursday, December 22, 2011 11:42 PM
    Tuesday, December 13, 2011 3:27 PM
  • Again, thanks for the help.  I didn't include my entire stylesheet because it is pretty long and I thought I would only include the snippet that I'm attempting to fix.  I'm trying to reorganize it a bit and make it easier to read, as well as trying to include the gradient from our new app's website to the header so that the auto generated emails look like the web site.  This would be considered nice to have functionality, but not absolutely necessary.

    Here is the entire stylesheet.

    <?xml version="1.0"?>
    <?xml-stylesheet type="text/xsl" href="stylesheet.xsl"?>
    <xsl:stylesheet version="1.0"
    				xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    
    	<xsl:template match="Email">
    
    		<html>
    			<head>
    				<style type="text/css">
              body 	{margin-left: 20px; font-family: segoe ui, tahoma, sans-serif;}
              h1	{text-shadow: -3px 0 4px #006; font-family:sans-Serif; text-align: center;}
              h2	{size: 70%; color: #347C17;}
              h3	{size: 70%; color: #C11B17;}
              td	{padding-right: 10px;}
              p.grad {
              background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4NTMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0UzQTgyMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzg1MykiIC8+Cjwvc3ZnPg==);
              }
            </style>
    			</head>
    		</html>
    <!--
    		<xsl:call-template name="svg-defs">
    		</xsl:call-template>
    -->
        <h1>
          <p class="grad">
            This is a test.
          </p>
        </h1>
        
    		<hr />
    
    		<body>
    			<h2>Approved Metrics</h2>
    			<DIV style="margin-bottom:40px; margin-top:20px;">
    				<xsl:choose>
    					<xsl:when test="Approved">
    						<table border="2">
                  <xsl:call-template name="TableHeader">
                  </xsl:call-template>
    							<xsl:apply-templates select="Approved"/>
    						</table>
    					</xsl:when>
    					<xsl:otherwise>
    						<div style="margin-left: 20px; font-family: tahoma, sans-serif; font-size: 150%; color: red;">
    							None of your Metrics have been approved.
    						</div>
    					</xsl:otherwise>
    				</xsl:choose>
    			</DIV>
    		</body>
        
    		<hr />
    
    		<body>
    			<h3>Rejected Metrics</h3>
    			<DIV style="margin-bottom:40px; margin-top:20px;">
    				<xsl:choose>
    					<xsl:when test="Rejected">
    						<table border="2">
                  <xsl:call-template name="TableHeader">
                  </xsl:call-template>
    							<xsl:apply-templates select="Rejected"/>
    						</table>
    					</xsl:when>
    					<xsl:otherwise>
    						<div style="margin-left: 20px; font-family: tahoma, sans-serif; font-size: 150%; color: green;">
    							None of your Metrics have been rejected.
    						</div>
    					</xsl:otherwise>
    				</xsl:choose>
    			</DIV>
    		</body>
    
    		<hr />
    
    	</xsl:template>
    
    	<xsl:template match="Approved">
        <xsl:call-template name="TableDefs">
        </xsl:call-template>
    	</xsl:template>
    
    	<xsl:template match="Rejected">
        <xsl:call-template name="TableDefs">
        </xsl:call-template>
      </xsl:template>
    
    	<xsl:template match="NoRecords">
    		<html>
    			<head>
    				<style type="text/css">
    					body 	{margin-left: 20px; font-family: tahoma, sans-serif; font-size: 150%; color: green;}
    					h1	{text-shadow: -3px 0 4px #006; font-family:sans-Serif; text-align: center; text-align: center;}
    				</style>
    			</head>
    		</html>
    
    		<xsl:call-template name="svg-defs">
    		</xsl:call-template>
    
    		<hr />
    
    		<body>
    			<div style="margin-bottom:20px; margin-top:20px;">
    				None of your Metrics have been approved or rejected.
    			</div>
    		</body>
    
    		<hr />
    
    	</xsl:template>
    
    	<xsl:template name="svg-defs">
        <!--
        <svg height="50px" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
              <linearGradient id="SmartFlowPurple"
                              x1="0%" y1="0%"
                              x2="100%" y2="0%"
                              spreadMethod="pad">
                <stop offset="10%" stop-color="#F2EFFB" stop-opacity="5"/>
                <stop offset="100%" stop-color="#240B3B" stop-opacity="5"/>
              </linearGradient>
            </defs>
          </svg>
          -->
          <h1>
              SMART<span style="font-style:italic;">Flow</span> Metric Approvals and Rejections
          </h1>
    	</xsl:template>
    
      <xsl:template name="TableDefs">
        <div style="color:#000; font-size: 90%;">
          <tr>
            <td>
              <xsl:value-of select="ScorecardID"/>
            </td>
            <td>
              <xsl:value-of select="ScorecardName"/>
            </td>
            <td>
              <xsl:value-of select="MetricID"/>
            </td>
            <td>
              <xsl:value-of select="MetricName"/>
            </td>
          </tr>
        </div>
      </xsl:template>
    
      <xsl:template name="TableHeader">
        <tr>
          <th>ScorecardID</th>
          <th>ScorecardName</th>
          <th>MetricID</th>
          <th>MetricName</th>
        </tr>
      </xsl:template>
    
    </xsl:stylesheet>
    

    Tuesday, December 13, 2011 4:18 PM
  • That stylesheet code does not make much sense to me, the first template with match="Email" starts out with creating a literal "html" result element with a "head" child with a "style" child having some CSS. What lacks is a "body" element inside that "html" element. The "html" element is followed by other result elements like the a "h1", "hr", "body" (even more than one "body"). While an XSLT stylesheet can create such fragments I wouldn't recommend doing that, try to have your XSLT create a proper HTML document structure where the "body" is a child of the "html", following the "head", and where all other elements are contained in the single "body".
    MVP Data Platform Development My blog
    Tuesday, December 13, 2011 5:05 PM
  • Thank you for all your advice.  I'm cleaning up my stylesheet quite well, and I'm now able to output the gradient image from your example.

    My issue now is that if I output everything to XML and open that file up in IE, I can see the gradient, but I'm not able to output anything to HTML.  If I simply change the extension of my file from XML to HTM or HTML, IE won't display anything.  And when I debug the XSL Stylesheet in VS2010 and include <xsl:output method="html" version="4.0" encoding="utf-16"/>, VS will also not display anything.  If I remove that line, I then get XML, which I can copy into a text file, save it as XML and then open it in IE and everything is displayed as expected.

    The XML also will does not display at all in Outlook as an HTML formatted email.  It seems that I can't have everything I want.  =((  If I want to see the gradient, I can't send emails with the XML that displays the gradient.  If I want the rest of my stylesheet to display in Outlook, then I can't include the gradient.  This is a bit frustrating, but I do appreciate all your adivce.

    Tuesday, December 13, 2011 9:10 PM