Adjusting hyperlinks in svg file - email
I am new here and facing problem while adjusting my exported svg file from Illustrator. I am trying to make it clickable (to link e-mail and Social Media Icons) but I am still not there. To linked yet. Can you please help me, to find the mistake? I know, it would be much more easier to code it by myself, although I am new and don't have enough experience for doing it. Thank you very much!
Sending the code, see mostly the end where are the slices I marked in the img in Illustrator and have to link.
Thanks a bunch!
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 850.4 566.9" style="enable-background:new 0 0 850.4 566.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
</style>
<rect id="_x3C_Slice_x3E_"><a xlink:href="https://www.xxxs.com/">x="423" y="237.9" class="st0" width="253" height="32"</a>/></rect>
<rect id="_x3C_Slice_x3E__1_"><a xlink:href="https://www.xxxx.com/">x="152" y="392.9" class="st0" width="271" height="29"</a>/></rect>
<rect id="_x3C_Slice_x3E__2_"><a xlink:href="https://www.xxxx/">x="580" y="295.9" class="st0" width="29" height="23"</a>/></rect>
<rect id="_x3C_Slice_x3E__3_"><a xlink:href="https://xxxx/">x="609" y="295.9" class="st0" width="20" height="23"</a>/></rect>
<rect id="_x3C_Slice_x3E__4_"><a xlink:href="https://xxx/">x="629" y="295.9" class="st0" width="25" height="23"</a>/></rect>
The <a> should go round the <rect> I changed the fill as well, otherwise all your rect elements are invisible.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 850.4 566.9" style="enable-background:new 0 0 850.4 566.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:blue;}
</style>
<a xlink:href="https://www.xxxs.com/"><rect id="_x3C_Slice_x3E_" x="423" y="237.9" class="st0" width="253" height="32"/></a>
<a xlink:href="https://www.xxxx.com/"><rect id="_x3C_Slice_x3E__1_" x="152" y="392.9" class="st0" width="271" height="29"/></a>
<a xlink:href="https://www.xxxx/"><rect id="_x3C_Slice_x3E__2_" x="580" y="295.9" class="st0" width="29" height="23"/></a>
<a xlink:href="https://xxxx/"><rect id="_x3C_Slice_x3E__3_" x="609" y="295.9" class="st0" width="20" height="23"/></a>
<a xlink:href="https://xxx/"><rect id="_x3C_Slice_x3E__4_" x="629" y="295.9" class="st0" width="25" height="23"/></a>
Related
Figma SVG not rendering with package flutter_svg
I'm exporting svg file from figma, flutter have errors: Failed to find definition for url(#pattern0) Failed to find definition for url(#pattern1) Full text of error: The following assertion was thrown while parsing AssetBundlePictureKey(bundle: PlatformAssetBundle#41f97(), name: "assets/images/select-image.svg", colorFilter: null, theme: SvgTheme(currentColor: Color(0xff000000), fontSize: 14.0, xHeight: 7.0)) in _getDefinitionPaint: Failed to find definition for url(#pattern1) This library only supports and xlink:href references that are defined ahead of their references. This error can be caused when the desired definition is defined after the element referring to it (e.g. at the end of the file), or defined in another file. This error is treated as non-fatal, but your SVG file will likely not render as intended My svg filу <svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <image id="image0_133_96" width="100" height="100" xlink:href="data:image/png;base64,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"/> <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1"> <use xlink:href="#image0_133_96" transform="translate(-0.0142405) scale(0.0102848 0.01)"/> </pattern> <pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1"> <use xlink:href="#image0_133_96" transform="translate(-0.0142405) scale(0.0102848 0.01)"/> </pattern> </defs> <mask id="mask0_133_96" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="26" height="27"> <rect y="0.333344" width="25.28" height="26" fill="url(#pattern0)"/> </mask> <g mask="url(#mask0_133_96)"> <rect y="0.333344" width="25.28" height="26" fill="url(#pattern1)"/> <rect y="0.333344" width="25.28" height="26" fill="#9A9EAA"/> </g> Where is my error?
I solved my problem, I converted image from figma to png to svg
How can I show svg files on Firefox?
I'm trying to display my logo using an svg image using Image.network(path) It works perfectly on chrome but on a few other browsers(mainly Firefox ) the svg isn't displayed. Edit: I tried using plugins but with my SVGs they don't work at all <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 383.3 88.7"> <defs> <style> .cls-1 { fill: #E31949; } </style> </defs> <title>Artboard 1</title> <path class="cls-1" d="M53.8,0A6.78,6.78,0,0,0,49,2.4L19.5,41.9c-1,1.3-1.8,1.1-1.8-.6V3a3.08,3.08,0,0,0-3-3H3A3.08,3.08,0,0,0,0,3V85.7a3,3,0,0,0,3,3H14.8a3,3,0,0,0,3-3V74a10.25,10.25,0,0,1,1.8-5.4l10-13.3a1.77,1.77,0,0,1,3.2.2L49.4,86.1a5.7,5.7,0,0,0,4.4,2.6H68c1.7,0,2.4-1.2,1.6-2.6l-25.1-46a5,5,0,0,1,.4-5L69.2,2.4C70.1,1.1,69.6,0,68,0Z" /> <path class="cls-1" d="M79.2,85.7a3,3,0,0,0,3,3H94a3,3,0,0,0,3-3V3a3,3,0,0,0-3-3H82.2a3,3,0,0,0-3,3Z" /> <path class="cls-1" d="M249.2,55.5c0,1.6-.7,1.8-1.5.4L216.5,2.6A6.05,6.05,0,0,0,212,0H199a3.08,3.08,0,0,0-3,3V85.7a3,3,0,0,0,3,3h11.8a3,3,0,0,0,3-3V33.3c0-1.7.7-1.8,1.5-.4l31.2,53.2a5.89,5.89,0,0,0,4.5,2.6h13a3,3,0,0,0,3-3V3a3.08,3.08,0,0,0-3-3H252.2a3.08,3.08,0,0,0-3,3Z" /> <path class="cls-1" d="M283.4,85.7a3,3,0,0,0,3,3h11.8a3,3,0,0,0,3-3V3a3.08,3.08,0,0,0-3-3H286.4a3.08,3.08,0,0,0-3,3Z" /> <path class="cls-1" d="M381.3,51.7a27.6,27.6,0,0,0-5.7-8.5,26.46,26.46,0,0,0-8.5-5.7,28.48,28.48,0,0,0-7.4-1.8,58.79,58.79,0,0,0-6-.3H342c-1.6,0-4.1-.1-5.4-.2l-1.1-.5a9.23,9.23,0,0,1-2.8-1.9,10.65,10.65,0,0,1-1.9-2.8,8.42,8.42,0,0,1-.7-3.5,8.42,8.42,0,0,1,.7-3.5,9,9,0,0,1,4.7-4.7l1.1-.5c1.3-.1,3.7-.2,5.4-.2h34.7a3.08,3.08,0,0,0,3-3V3a3.08,3.08,0,0,0-3-3H342c-1.6,0-4.3.1-6,.3a28.16,28.16,0,0,0-7.3,1.8,27,27,0,0,0-14.1,14.1,25.64,25.64,0,0,0-2.1,10.3,26.12,26.12,0,0,0,2.1,10.4,27.6,27.6,0,0,0,5.7,8.5,27.14,27.14,0,0,0,8.4,5.7,28.16,28.16,0,0,0,7.3,1.8,58.79,58.79,0,0,0,6,.3h11.8c1.6,0,4.1.1,5.4.2l1.1.5a9,9,0,0,1,4.7,4.7,9.1,9.1,0,0,1,0,7,9,9,0,0,1-4.7,4.7l-1.1.5c-1.3.1-3.7.2-5.4.2H320.4a3,3,0,0,0-3,3V85.8a3,3,0,0,0,3,3h33.4c1.6,0,4.3-.1,6-.3a29.41,29.41,0,0,0,7.4-1.8,27.6,27.6,0,0,0,8.5-5.7,27.14,27.14,0,0,0,5.7-8.4,25.64,25.64,0,0,0,2.1-10.3A32.79,32.79,0,0,0,381.3,51.7Z" /> <path class="cls-1" d="M179.5,17.6a34.89,34.89,0,0,0-5.6-7.2,38.7,38.7,0,0,0-7.2-5.6,41.06,41.06,0,0,0-6-2.8,84.65,84.65,0,0,0-5.6,8.6c-1.3,2.4-2.5,4.9-3.7,7.4.6.2,1.3.4,1.9.6l1.9.3a13.4,13.4,0,0,0,2,.1c2.9,0,4.8,3.2,6.2,5.7a10.84,10.84,0,0,1,.8,1.9,19.19,19.19,0,0,1,.6,10.4,18.62,18.62,0,1,1-32.6-15.9,19.2,19.2,0,0,1,1.4-1.5c4.7-5.2,9.8-4.2,15-2.6a52.51,52.51,0,0,1,2.3-8.4A43.9,43.9,0,0,1,154.8.4a18.48,18.48,0,0,0-2.9-.3c-1.6-.1-4.3-.2-6-.2H116.4a3,3,0,0,0-3,3V85.6a3,3,0,0,0,3,3h11.8a3.08,3.08,0,0,0,3-3V74a3,3,0,0,1,3-3l13.9-.1a5.08,5.08,0,0,1,4.2,2.7L157.7,86a5,5,0,0,0,4.2,2.8h12.9a1.84,1.84,0,0,0,1.8-2.8l-7.5-17.7a3.89,3.89,0,0,1,1.3-4.5,48.14,48.14,0,0,0,4.5-3.9,33,33,0,0,0,5.2-7.2,39.08,39.08,0,0,0,3.3-8.2,33.4,33.4,0,0,0,1.1-8.9,32.35,32.35,0,0,0-1.3-9.4A47.43,47.43,0,0,0,179.5,17.6Z" /> </svg>
Add unicode character to Cognos Analytics expression data
I've got a simple expression like this: ReportDate() which will print out the timestamp when the report was executed. I want to add an unicode character like the SUM SIGN (https://www.fileformat.info/info/unicode/char/2211/index.htm) to that data in that expression. It is not a text field, it needs to be a concatination to a data expression. Any idea? A simple || ... (any HTML or text) doesn't work. Version Cognos Analytics 11 Database is DB2 LUW Edit: The expression looks like this: case when [Datasource].[D_FINRP_D_KONTRAHENT_K].[SL_KONTRAHENTENGRUPPE] like 'D%' then concat('D (Summe)';' ∑') else [Datasource].[D_FINRP_D_KONTRAHENT_K].[SL_KONTRAHENTENGRUPPE] end The HTML in the Cognos report looks like this: D (Summe) and then the SUM sign doesn't show up.
Provided you using a Report Expression aka a Layout calculation from the Insertable objects pane, you should be able to use the following expression: timestamp2string (ReportDate ())+ '∑'
Rather than a Query calculation, try an HTML item using a Data item value. Your expression should look like: [Sales (query)].[Branch].[City] + 'Σ' Here's an example using the sample data. <report xmlns="http://developer.cognos.com/schemas/report/14.3/" useStyleVersion="11.4" expressionLocale="en-us"> <drillBehavior/> <layouts> <layout> <reportPages> <page name="Page1"> <style> <defaultStyles> <defaultStyle refStyle="pg"/> </defaultStyles> </style> <pageBody> <style> <defaultStyles> <defaultStyle refStyle="pb"/> </defaultStyles> </style> <contents> <list horizontalPagination="true" name="List1" refQuery="Query1"> <noDataHandler> <contents> <block> <contents> <textItem> <dataSource> <staticValue>No Data Available</staticValue> </dataSource> <style> <CSS value="padding:10px 18px;"/> </style> </textItem> </contents> </block> </contents> </noDataHandler> <style> <CSS value="border-collapse:collapse"/> <defaultStyles> <defaultStyle refStyle="ls"/> </defaultStyles> </style> <listColumns> <listColumn> <listColumnTitle> <style> <defaultStyles> <defaultStyle refStyle="lt"/> </defaultStyles> </style> <contents> <textItem> <dataSource> <staticValue>HTML item</staticValue> </dataSource> </textItem> </contents> </listColumnTitle> <listColumnBody> <style> <defaultStyles> <defaultStyle refStyle="lc"/> </defaultStyles> </style> <contents> <HTMLItem> <dataSource> <dataItemValue refDataItem="City"/> </dataSource> </HTMLItem> </contents> </listColumnBody> </listColumn> </listColumns> </list> </contents> </pageBody> </page> </reportPages> </layout> </layouts> <XMLAttributes> <XMLAttribute output="no" name="RS_CreateExtendedDataItems" value="true"/> <XMLAttribute output="no" name="RS_modelModificationTime" value="2015-11-25T21:38:24.820Z"/> <XMLAttribute output="no" name="listSeparator" value=","/> </XMLAttributes> <modelPath>/content/folder[#name='Samples']/folder[#name='Models']/package[#name='GO sales (query)']/model[#name='model']</modelPath> <queries> <query name="Query1"> <source> <model/> </source> <selection> <dataItem aggregate="none" rollupAggregate="none" name="City"> <expression>[Sales (query)].[Branch].[City] + 'Σ'</expression> <XMLAttributes> <XMLAttribute output="no" name="RS_dataType" value="3"/> <XMLAttribute output="no" name="RS_dataUsage" value="0"/> </XMLAttributes> </dataItem> </selection> </query> </queries> </report>
SSRS 2008 Adding PageBreak Before and within Subreport
I have a report with a Subreport. I want to add a pagebreak before the subreport. Also, the subreport has page breaks within that report but those breaks are not recognized when I run it as a subreport. I would appreciate any guidance on this?
Add a rectangle between your subreports. Notice you can set page break settings in rectangle. <SubReport1>...</SubReport1> <Rectangle Name="RectanglePageBreak"> <ReportItems> <Rectangle Name="RectanglePageBreak2"> <PageBreak> <BreakLocation>End</BreakLocation> </PageBreak> <KeepTogether>true</KeepTogether> <Height>0.05in</Height> <Width>7.9in</Width> <Visibility> <Hidden>False</Hidden> </Visibility> <Style> <Border> <Style>None</Style> </Border> </Style> </Rectangle> </ReportItems> <PageBreak> <BreakLocation>End</BreakLocation> </PageBreak> <KeepTogether>true</KeepTogether> <Top>1.79872in</Top> <Height>0.05in</Height> <Width>7.9in</Width> <ZIndex>2</ZIndex> <Visibility> <Hidden>False</Hidden> </Visibility> <Style> <Border> <Style>None</Style> </Border> </Style> </Rectangle> <SubReport2>...</SubReport2>
SVG linearGradiend spreadMethod ignored by Safari (OSX and iOS)
Please look at the attached example. It works fine everywhere (including Android) but in iOS 5.1.1 (both iPhone / iPad) Safari. If you test it there you'll see that the linear gradient is not repeated at all as it appears everywhere else. Is that a bug of ios safari or is there something wrong on my svg? <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="150" height="150" id="svg5262" onload="anim();"> <defs id="defs5264"> <linearGradient x1="0" y1="0" x2="-8" y2="8" id="linearGradient5260" gradientUnits="userSpaceOnUse" gradientTransform="translate(0,0)" spreadMethod="repeat"> <stop id="stop5216" style="stop-color:#ff0000;stop-opacity:1" offset="0" /> <stop id="stop5218" style="stop-color:#7f0000;stop-opacity:1" offset="1" /> </linearGradient> </defs> <script language="javascript"> var x=0; function anim(){ var gr = document.getElementById("linearGradient5260"); gr.setAttribute("gradientTransform", "translate(" + x + ", 0)"); x++; if (x>15) x=0; setTimeout(anim, 50); } </script> <g id="layer1"> <path d="M 20,140 L 20,20 140,20" style="fill:none;stroke:black;stroke-width:12;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /> <path d="M 20,140 L 20,20 140,20" id="path2985" style="fill:none;stroke:url(#linearGradient5260);stroke-width:10;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /> </g> </svg>
This is a bug. It has been confirmed to me by Apple (bug id #10171198 at http://bugreport.apple.com)
#Iviggiani It seems that the spreadMethod attribute of the linearGradient tag is being ignored on the iPad (both Safari and Chrome in my tests). Using both the SVG linearGreadient and pattern tags, I was able to create the same effect that I was getting with just the linearGradient tag, with the benefit that it works on both a windows machine and the iPad. I got the idea from this site https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns Here is an example of what I did (jsFiddle here: http://jsfiddle.net/wahoodoss/eG5Tx/): <!DOCTYPE html> <html> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <svg id="abc" width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="Gradient1"> x1="0%" y1="0%" x2="0%" y2="100%" <stop offset="40%" stop-color="white" stop-opacity="1"/> <stop offset="100%" stop-color="#00AA00" stop-opacity="1"/> </linearGradient> <pattern id="Pattern" x="0" y="0" width="5" height="5" patternTransform="rotate(90 0 0)" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="5" height="5" fill="url(#Gradient1)"/> </pattern> </defs> </svg> <script> var arc = d3.svg.arc() .innerRadius(40).outerRadius(100) .startAngle(20 * 3.141 / 180) .endAngle(120 * 3.141 / 180); var chart = d3.select("#abc") .attr("class", "chart") .attr("width", 420) .attr("height", 420); chart.append("svg:rect") .style("fill","url(#Pattern)") .style("stroke", "black") .attr("x", 20).attr("y",20).attr("width",120).attr("height",120); </script> </body> </html>