Flip PNG within SVG - css

I would like to flip the png file I have embedded in my inline SVG, as the containing elements cause it to be upside-down. I have tried editing the id="path104" element containing it with something like transform:rotate(180deg); but this takes it off screen.
Code:
https://codepen.io/anon/pen/ZqBVjq
The PNG itself is embedded as a pattern in id="defs453".
<defs id="defs453">
<pattern id="pattern-image-browser-filling" x="0" y="0" width="1" height="1">
<image xlink:href="https://image.ibb.co/gtoOip/sdfgh.png" width="893.5" height="446.8"></image>
</pattern>
</defs>


You need to transform your image: scale(1,-1) for a vertical flip. Then translate back translate(0,-446.8)
<image transform="scale(1,-1) translate(0,-446.8)" xlink:href="image.ibb.co/gtoOip/sdfgh.png"; width="893.5" height="446.8"></image>

Related

SVG with marker having an issue on mouse over

I have a button with svg inside like:
<button>
Checkout
<ArrowSvg />
</button>
And ArrowSvg looks like this (line has class: svg-line):
<svg fill="none" stroke="#000">
<defs>
<marker id="m" overflow="visible">
<path d="M-4,-4L0,0 -4,4" />
</marker>
</defs>
<line x1="0" y1="50%" x2="100%" y2="50%"marker-end="url(#m)" class="svg-line" />
</svg>
When button is hovered, I change the stroke color:
btn:hover > .svg-line {
stroke: blue;
}
It's working well - when I hover the button, the arrow (line and arrow head) turns blue.
But when I display the multiple buttons (more than 1), hovering 1 button affects arrows in other buttons. The arrow head part (which is marker/path in svg?) of all the buttons get affected when hovering the first button.
I am also working with the arrow width, so I need line. I can't make everything with path because I won't be able to expand the arrow width.
Am I missing anything? Why am I seeing this issue?

Wrap it in a native JS Web Component, supported in all modern browsers, to create the <svg>
because every SVG requires a unique marker ID
note: the SVG is created for every instance, no need for a marker at all, use the path by itself
customElements.define("svg-button",class extends HTMLElement{
connectedCallback(){
let id = "id" + (Math.floor(Math.random() * 1e10));
let stroke = this.getAttribute("stroke") || "#000";
this.innerHTML = `
<button>
Checkout
<svg fill="none" stroke="${stroke}" viewBox="0 0 10 10">
<defs>
<marker id="${id}" overflow="visible">
<path d="M-4,-4L0,0 -4,4"/>
</marker>
</defs>
<line x1="0" y1="5" x2="9" y2="5" marker-end="url(#${id})"/>
</svg>
</button>`
}
});
<style>
button:hover svg {
stroke:gold;
}
</style>
<svg-button></svg-button>
<svg-button stroke="red"></svg-button>
<svg-button stroke="green"></svg-button>
<svg-button stroke="blue"></svg-button>

What you are writing looks like .JSX syntax, but the question is lacking a react tag. I will assume it for this answer anyway, but other frameworks using the format will probably work comparably.
All you need is a unique id for the <marker> element. This is easily done if you spell out the <ArrowSvg> as a function. Then, wrap it in a factory function to form a closure over a running number:
const ArrowSvg = (() => {
let id = 0;
return function (props) {
return (
const ref = 'arrowMarker' + ++id;
<svg fill="none" stroke="#000">
<defs>
<marker id=(ref) overflow="visible">
<path d="M-4,-4L0,0 -4,4" />
</marker>
</defs>
<line x1="0" y1="50%" x2="100%" y2="50%"
marker-end=(`url(#${ref})`) class="svg-line" />
</svg>
);
}
})();

Having many SVG DomMarkers in HERE maps causes lag

I'm using HERE maps 3.0 (also tried 3.1 and have the same issue) with the default layers in an angular project. The map has DomMarkers using a complex SVG icon with many paths inside a div.
I noticed that adding many markers (over 200) causes a lag when zooming or moving around the map.
I'm using SVG instead of static image files to be able to change the colour and modify the shape of the icon before adding it to the map.
Using a dom icon with multiple divs shaped with CSS instead of the SVG, results in the same lag.
If I use a more simple SVG or a simple div, the lag is reduced significantly.
What's causing the lag? Is it caused by the complexity of the SVG, or the large and many paths it has?
Is there a way to have complex SVG markers and eliminate the lag?
My SVG:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-656 895.2 221.2 259.8" style="enable-background:new -656 895.2 221.2 259.8;" xml:space="preserve">
<g>
<path fill="white" d="M-489.9,937.4c-15.8-16.3-36.6-25.3-58.5-25.3c-46.8,0-84.8,41.1-84.8,91.6c0,13.3,2.5,25.9,7.4,37.2
c12.9,30.9,48.3,84.6,68,109.5c2.3,2.9,5.7,4.6,9.4,4.6c3.5,0,6.7-1.5,9.1-4.2l0.1-0.2l0.1-0.2c19.5-24.5,54.8-77.9,68-109.4
c4.9-11.9,7.3-24.4,7.3-37.1C-463.6,978.7-472.9,954.9-489.9,937.4z M-478.3,1037.8c-12.5,29.9-47,82.5-66.8,107.4
c-0.9,1-2,1.6-3.3,1.6c-1.3,0-2.5-0.6-3.3-1.6c-19.7-24.9-54.3-77.6-66.8-107.6c-4.5-10.5-6.7-21.9-6.7-34
c0-46,34.5-83.5,76.9-83.5s76.9,37.4,76.7,83.7C-471.6,1015.9-473.9,1027.4-478.3,1037.8z"/>
<path fill="#775DD0" d="M-548.3,920.4c-42.4,0-76.9,37.4-76.9,83.5c0,12,2.2,23.4,6.7,34c12.5,30,47.1,82.6,66.8,107.6
c0.8,1,2,1.6,3.3,1.6c1.3,0,2.4-0.6,3.3-1.6c19.9-24.8,54.4-77.5,66.9-107.5c4.4-10.6,6.7-22.1,6.7-34
C-471.4,957.7-505.9,920.4-548.3,920.4z"/>
</g>
<g>
<path fill="white" d="M-454.5,1067.8h-47.8c-10.9,0-19.7,8.9-19.7,19.7v47.8c0,10.9,8.9,19.7,19.7,19.7h47.8
c10.9,0,19.7-8.9,19.7-19.7v-47.8C-434.8,1076.7-443.6,1067.8-454.5,1067.8z M-444.8,1135.4c0,5.4-4.3,9.7-9.7,9.7h-47.8
c-5.4,0-9.7-4.4-9.7-9.7v-47.8c0-5.4,4.3-9.7,9.7-9.7h47.8c5.3,0,9.7,4.4,9.7,9.7V1135.4z"/>
<path fill="#775DD0" d="M-454.5,1077.8h-47.8c-5.4,0-9.7,4.4-9.7,9.7v47.8c0,5.4,4.3,9.7,9.7,9.7h47.8c5.4,0,9.7-4.4,9.7-9.7v-47.8
C-444.8,1082.2-449.2,1077.8-454.5,1077.8z"/>
<path fill="white" d="M-461.6,1094.7l-22,24.8l-11-12.4c-2-2.2-5.3-2.2-7.4,0c-2,2.2-2,6,0,8.3l14.7,16.5
c2,2.2,5.3,2.2,7.4,0l25.7-29c2.1-2.3,2.1-6.1,0-8.3C-456.2,1092.4-459.5,1092.4-461.6,1094.7z"/>
</g>
<g>
<path fill="white" d="M-478.1,941.6c-6.7,0-19.9,3.7-20,10.3c4.3,6.5,11.7,10.7,20,10.7s15.7-4.3,20-10.7
C-458.2,945.2-471.5,941.6-478.1,941.6z M-478.1,952.6c-1.3,0-2.6-0.2-3.9-0.6c1.4-0.3,2.7-0.5,3.9-0.5s2.5,0.2,3.9,0.5
C-475.5,952.4-476.8,952.6-478.1,952.6z"/>
<path fill="white" d="M-478.1,895.2c-23.9,0-43.3,19.4-43.3,43.4s19.4,43.3,43.3,43.3s43.3-19.4,43.3-43.3S-454.2,895.2-478.1,895.2
z M-478.1,971.9c-18.4,0-33.3-14.9-33.3-33.4c0-18.4,14.9-33.3,33.3-33.3s33.3,14.9,33.3,33.3C-444.8,957-459.7,971.9-478.1,971.9z
"/>
<path fill="white" d="M-478.1,935.2c5.5,0,10-4.5,10-10c0-5.5-4.5-10-10-10s-10,4.5-10,10C-488.2,930.7-483.7,935.2-478.1,935.2z"/>
<path d="M-478.1,905.2c-18.4,0-33.3,14.9-33.3,33.3c0,18.4,14.9,33.4,33.3,33.4s33.3-14.9,33.3-33.4
C-444.8,920.1-459.7,905.2-478.1,905.2z M-478.1,915.2c5.5,0,10,4.5,10,10c0,5.5-4.5,10-10,10s-10-4.5-10-10
C-488.2,919.7-483.7,915.2-478.1,915.2z M-478.1,962.6c-8.4,0-15.7-4.3-20-10.7c0.1-6.6,13.4-10.3,20-10.3s19.9,3.7,20,10.3
C-462.5,958.3-469.8,962.6-478.1,962.6z"/>
</g>
<g>
<path fill="white" d="M-572.4,927.7c0.3-1,0.5-2.1,0.5-3.2c0-2.7-1.1-5.2-2.9-7.1l-4.8-4.7c-1.2-1.2-2.7-2-4.2-2.5
c-0.5-1.5-1.3-3-2.5-4.2l-4.7-4.8c-1.9-1.9-4.4-2.9-7.1-2.9c0,0,0,0,0,0c-1.1,0-2.2,0.2-3.2,0.5c-1.8-2.2-4.6-3.6-7.7-3.6h-6.7
c-3.1,0-5.9,1.4-7.7,3.6c-1-0.3-2.1-0.5-3.2-0.5c0,0,0,0,0,0c-2.7,0-5.2,1.1-7.1,2.9l-4.7,4.8c-1.2,1.2-2,2.7-2.5,4.2
c-1.5,0.5-3,1.3-4.2,2.5l-4.8,4.7c-1.9,1.9-2.9,4.4-2.9,7.1c0,1.1,0.2,2.2,0.5,3.2c-2.2,1.8-3.6,4.6-3.6,7.7v6.7
c0,3.1,1.4,5.9,3.6,7.7c-0.3,1-0.5,2.1-0.5,3.2c0,2.7,1.1,5.2,2.9,7.1l4.8,4.7c1.2,1.2,2.7,2,4.2,2.5c0.5,1.5,1.3,3,2.5,4.2
l4.7,4.8c1.9,1.9,4.4,2.9,7.1,2.9c0,0,0,0,0,0c1.1,0,2.2-0.2,3.2-0.5c1.8,2.2,4.6,3.6,7.7,3.6h6.7c3.1,0,5.9-1.4,7.7-3.6
c1,0.3,2.1,0.5,3.2,0.5c0,0,0,0,0,0c2.7,0,5.2-1.1,7.1-2.9l4.7-4.8c1.2-1.2,2-2.7,2.5-4.2c1.5-0.5,3-1.3,4.2-2.5l4.8-4.7
c1.9-1.9,2.9-4.4,2.9-7.1c0-1.1-0.2-2.2-0.5-3.2c2.2-1.8,3.6-4.6,3.6-7.7v-6.7C-568.8,932.3-570.2,929.6-572.4,927.7z
M-578.8,942.2h-14l10.9,10.9l-4.8,4.7l-15.6-15.6h-6.7v6.7l15.6,15.6l-4.7,4.8l-10.9-10.9v14h-6.7v-14l-10.9,10.9l-4.7-4.8
l15.6-15.6v-6.7h-6.7l-15.6,15.6l-4.8-4.7l10.9-10.9h-14v-6.7h14l-10.9-10.9l4.8-4.7l15.6,15.6h6.7v-6.7l-15.6-15.6l4.7-4.8
l10.9,10.9v-14h6.7v14l10.9-10.9l4.7,4.8l-15.6,15.6v6.7h6.7l15.6-15.6l4.8,4.7l-10.9,10.9h14V942.2z"/>
<polygon points="-581.9,924.5 -586.7,919.8 -602.3,935.4 -609,935.4 -609,928.7 -593.4,913.1 -598.1,908.3 -609,919.2 -609,905.2
-615.8,905.2 -615.8,919.2 -626.7,908.3 -631.4,913.1 -615.8,928.7 -615.8,935.4 -622.5,935.4 -638.1,919.8 -642.9,924.5
-632,935.4 -646,935.4 -646,942.2 -632,942.2 -642.9,953.1 -638.1,957.8 -622.5,942.2 -615.8,942.2 -615.8,948.9 -631.4,964.5
-626.7,969.3 -615.8,958.4 -615.8,972.4 -609,972.4 -609,958.4 -598.1,969.3 -593.4,964.5 -609,948.9 -609,942.2 -602.3,942.2
-586.7,957.8 -581.9,953.1 -592.8,942.2 -578.8,942.2 -578.8,935.4 -592.8,935.4 "/>
</g>
<g>
<path fill="white" d="M-537.3,987.5c-1.9,0-3.4,1.5-3.4,3.4c0,1.9,1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4
C-533.9,989-535.4,987.5-537.3,987.5z"/>
<path fill="white" d="M-557.5,987.5c-1.9,0-3.4,1.5-3.4,3.4c0,1.9,1.5,3.4,3.4,3.4s3.4-1.5,3.4-3.4
C-554.2,989-555.7,987.5-557.5,987.5z"/>
<path fill="white" d="M-513.8,997.6c0-6.7-2.1-13.3-5.8-18.8l0.3-0.3c3.9-3.9,3.9-10.2,0-14.1l-2.8-2.8c-1.9-1.9-4.4-2.9-7.1-2.9
s-5.2,1.1-7.1,2.9l-3.3,3.3c-2.6-0.6-5.2-1-7.9-1c-2.7,0-5.3,0.3-7.9,1l-3.3-3.3c-2-2-4.5-2.9-7.1-2.9s-5.1,1-7.1,2.9l-2.8,2.8
c-3.9,3.9-3.9,10.2,0,14.1l0.3,0.3c-3.7,5.5-5.8,12-5.8,18.8v3.4c0,0.6,0,1.1,0.1,1.7c-0.1,0.5-0.1,1.1-0.1,1.7v13.5
c0,18.5,15.1,33.6,33.6,33.6s33.6-15.1,33.6-33.6v-13.5c0-0.6,0-1.1-0.1-1.7c0.1-0.5,0.1-1.1,0.1-1.7V997.6z M-523.8,1017.9
c0,13.1-10.6,23.6-23.6,23.6c-13.1,0-23.6-10.6-23.6-23.6v-13.5h47.3V1017.9z M-523.8,1001H-571v-3.4c0-7.8,3.9-14.7,9.7-19
l-7.1-7.1l2.8-2.8l7.8,7.8c3.2-1.6,6.7-2.5,10.5-2.5s7.3,1,10.5,2.5l7.8-7.8l2.8,2.8l-7.1,7.1c5.9,4.3,9.7,11.2,9.7,19V1001z"/>
<path fill="#775DD0" d="M-571,1017.9c0,13.1,10.6,23.6,23.6,23.6c13.1,0,23.6-10.6,23.6-23.6v-13.5H-571V1017.9z"/>
<path fill="#775DD0" d="M-533.5,978.6l7.1-7.1l-2.8-2.8l-7.8,7.8c-3.2-1.6-6.7-2.5-10.5-2.5s-7.3,1-10.5,2.5l-7.8-7.8l-2.8,2.8l7.1,7.1
c-5.9,4.3-9.7,11.2-9.7,19v3.4h47.3v-3.4C-523.8,989.8-527.6,982.9-533.5,978.6z M-557.5,994.2c-1.9,0-3.4-1.5-3.4-3.4
c0-1.9,1.5-3.4,3.4-3.4s3.4,1.5,3.4,3.4C-554.2,992.7-555.7,994.2-557.5,994.2z M-537.3,994.2c-1.9,0-3.4-1.5-3.4-3.4
c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C-533.9,992.7-535.4,994.2-537.3,994.2z"/>
</g>
</svg>
The markers are added from a for loop to a group (H.map.Group) that was already added in the map. The lag is happening not while loading the markers, but when trying to move around the map or zoom in and out. It's very laggy especially when zoomed out and many markers are visible.
adding the group in the map:
this.map.addObject(this.markerGroup);
adding a marker:
addMarker(data) {
const id = data.id;
if (!mapObjects[id]) {
let coords;
coords = { lat: data.lat, lng: data.lon };
const icon = new H.map.DomIcon(this.createMarkerIcon(data));
this.mapObjects[id] = new H.map.DomMarker(coords, { icon: icon });
this.mapObjects[id].setData(data);
this.markerGroup.addObject(this.mapObjects[id]);
} else if (this.markerChanged(data)) {
this.updateMarker(data);
}
}
loop that adds the markers:
markers.forEach(markerData => {
this.addMarker(markerData);
});
edit: svg added, snippets added

Caching could help you to avoid this zoom out lag. reading larger marker data again and again with complex svg making it laggy. you can try to store the markers in one variable and cache it if the data is not changing all the time, like below
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

The problem was that I used H.map.DomMarker instead of H.map.Marker and the many html elements caused the map to lag.
H.map.Markers are rendered on the map and don't cause zooming and moving lag.

Using an svg image with inline data uri

I'm pretty sure this isn't possible, but before giving up I wanted to throw it out there.
Here's a fiddle, http://jsfiddle.net/sqszuzep/6/
<svg version="1.1" viewBox="0 0 2 1" width="100%">
<image xlink:href="http://fillmurray.com/600/300" x="0" y="0" height="100%" width="100%"/>
</svg>
<div id="bg" class="bg"></div>
<div id="bg2" class="bg"></div>
<h2>IE10/11</h2>
<div id="bg3" class="bg"></div>
<div id="bg4" class="bg"></div>
js:
// Chrome/Firefox/Safari
var x = encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><circle fill="#000000" stroke="#000000" stroke-width="20" cx="105" cy="105" r="90"></circle> <circle fill="none" stroke="#0000FF" stroke-width="10" cx="300" cy="105" r="90"></circle></svg>');
var y = encodeURIComponent('<svg version="1.1" viewBox="0 0 2 1" width="100%"><image xlink:href="http://fillmurray.com/600/300" x="0" y="0" height="100%" width="100%"/></svg>');
$(function () {
$('#bg').css('background-image', 'url("data:image/svg+xml;utf8,'+ x +'")');
$('#bg2').css('background-image', 'url("data:image/svg+xml;utf8,'+ y +'")');
});
// IE 10/11
// Chrome/Firefox/Safari
var x = btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><circle fill="#000000" stroke="#000000" stroke-width="20" cx="105" cy="105" r="90"></circle> <circle fill="none" stroke="#0000FF" stroke-width="10" cx="300" cy="105" r="90"></circle></svg>');
var y = btoa('<svg version="1.1" viewBox="0 0 2 1" width="100%"><image xlink:href="http://fillmurray.com/600/300" x="0" y="0" height="100%" width="100%"/></svg>');
$(function () {
$('#bg3').css('background-image', 'url("data:image/svg+xml;base64,'+ x +'")');
$('#bg4').css('background-image', 'url("data:image/svg+xml;base64,'+ y +'")');
});
Essentially I was attempting to use a svg image, encode the svg element and use it in css on an element. This works for vectors, but not for images loaded via svg.
I believe this pertains, https://bugs.webkit.org/show_bug.cgi?id=63548 saying that "Images are not allowed to load further resources".
What I see is that no browser supports this feature, or I'm doing something wrong.
It is possible to base64 encode image data and use that, as demonstrated in this fiddle I wrote: http://jsfiddle.net/N2n27/3/. On browsers that support svg filters (non-IE) this is a handy way to do blurring and other filter effects.
Am I missing something here?

There are two issues with the y version.
a) the svg element has no namespaces (it does in the x version) but in the y version it also needs the xlink namespace as the image href attribute is in the xlink namespace.
b) the image in the SVG is external.
A css background is an image itself so any SVG it references cannot load external resources. You therefore need to URI encode the inner image data and then uri encode the outer SVG (thereby doubly encoding the inner image data)
So you need something like this...
var y = encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 2 1" width="100%"><image xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAA....
Which I've completed here for the Firefox/Chrome case

'punch out' transparent path on svg background

I have an svg defining a path drawn on a transparent background -- a pretty basic svg.
I need to convert this svg so that the background is white and the text is transparent and cutout of the white background. I have been playing around with clip-path but to no avail. How is the right way to make this modification?
<svg width="138" xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 138 40">
<g transform="translate(2 30)">
<path d="m6.12,0 5.88,0 0-2.46-.6,0-2.535-9.21-5.46,0-2.535,9.21-.6,0 0,2.46 5.13,0 0-2.46-.9,0 .24-1.2 2.025,0 .255,1.2-.9,0 0,2.46m-.435-8.235 .15,0 .615,2.985-1.38,0 .615-2.985"/>
<path d="m12.3696-9.21 .66,0 0,6.75-.66,0 0,2.46 4.77,0 0-2.46-.66,0 0-9.21-4.11,0 0,2.46"/>
<path d="m17.5552-5.88 .66,0 0,3.42-.66,0 0,2.46 5.28,0 0-2.46-1.17,0 0-3.42 1.17,0 0-2.46-1.17,0c0-.63 .255-.87 1.035-.87 .735,0 1.47,.075 1.47,.075v-2.355c0,0-.78-.39-2.43-.39-2.205,0-3.495,1.035-3.495,3.54h-.69v2.46"/>
<path d="m28.518,0 4.11,0 0-2.46-.66,0 0-2.46c0-2.415-.945-3.63-4.155-3.63-2.385,0-4.155,.525-4.155,.525v2.58c.99-.225 2.295-.435 3.48-.435 1.125,0 1.38,.3 1.38,.87-3.735,0-5.4,1.02-5.4,2.88 0,1.515 1.065,2.34 2.775,2.34 1.44,0 2.25-.75 2.625-1.23v1.02m0-3.42c0,.645-.33,.96-.915,.96-.57,0-.825-.135-.825-.48 0-.48 .675-.57 1.74-.57v.09"/>
<path d="m41.9899-2.685c-.75,0-.93-.285-.93-.885h-3.3v2.97c0,0 1.815,.81 4.695,.81 3.21,0 4.95-1.29 4.95-3.855 0-2.58-1.935-3.375-4.26-4.125-.615-.195-.93-.3-.93-.645 0-.42 .27-.57 .93-.57 .465,0 .825,.18 .825,.75h3.15v-2.685c0,0-1.485-.96-4.38-.96-3.84,0-5.115,1.38-5.115,3.615 0,2.34 1.44,3.135 4.41,4.245 .705,.255 .87,.465 .87,.735 0,.39-.255,.6-.915,.6"/>
<path d="m47.8481-9.21 .66,0 0,6.75-.66,0 0,2.46 4.77,0 0-2.46-.66,0 0-9.21-4.11,0 0,2.46"/>
<path d="m58.2837,0 4.11,0 0-2.46-.66,0 0-2.46c0-2.415-.945-3.63-4.155-3.63-2.385,0-4.155,.525-4.155,.525v2.58c.99-.225 2.295-.435 3.48-.435 1.125,0 1.38,.3 1.38,.87-3.735,0-5.4,1.02-5.4,2.88 0,1.515 1.065,2.34 2.775,2.34 1.44,0 2.25-.75 2.625-1.23v1.02m0-3.42c0,.645-.33,.96-.915,.96-.57,0-.825-.135-.825-.48 0-.48 .675-.57 1.74-.57v.09"/>
<path d="m66.9288-11.67-4.11,0 0,2.46 .66,0 0,6.75-.66,0 0,2.46 4.11,0 0-1.02c.375,.48 1.185,1.23 2.325,1.23 2.07,0 3.075-1.62 3.075-4.38 0-2.76-1.005-4.38-3.075-4.38-1.14,0-1.95,.75-2.325,1.23v-4.35m1.74,8.25c0,.675-.3,.96-.87,.96-.57,0-.87-.285-.87-.96v-1.5c0-.675 .3-.96 .87-.96 .57,0 .87,.285 .87,.96v1.5"/>
<path d="m83.0515-2.46c-.675,0-1.02-.33-1.02-1.11v-4.53c0-.78 .345-1.11 1.02-1.11 .675,0 1.02,.33 1.02,1.11v4.53c0,.78-.345,1.11-1.02,1.11m5.73-3.375c0-4.38-2.235-6.045-5.73-6.045-3.495,0-5.73,1.665-5.73,6.045 0,4.38 2.235,6.045 5.73,6.045 3.495,0 5.73-1.665 5.73-6.045"/>
<path d="m94.4339,0 4.77,0 0-2.46-.66,0 0-2.46c0-2.505-1.02-3.63-2.655-3.63-1.35,0-2.055,.75-2.535,1.23v-1.02h-4.11v2.46h.66v3.42h-.66v2.46h4.77v-2.46h-.66v-2.46c0-.675 .3-.96 .87-.96 .57,0 .87,.285 .87,.96v2.46h-.66v2.46"/>
<path d="m103.732-8.55c-2.775,0-4.53,1.455-4.53,4.38 0,2.925 1.755,4.38 4.53,4.38 2.385,0 3.735-.75 3.735-.75v-2.4c-.72,.24-1.86,.48-3.18,.48-1.05,0-1.425-.36-1.425-1.08v-.09h4.86v-1.08c0-1.89-.915-3.84-3.99-3.84m0,2.67c.57,0 .87,.285 .87,.96v.09h-1.74v-.09c0-.675 .3-.96 .87-.96"/>
</g>
</svg>

Try using a mask instead of a clip path.
<mask id="m"> ... </mask>
Inside the mask, create a white rectangle, followed by (under) your black paths. The brightness of different areas of the mask determines the opacity of the corresponding areas of the element the mask is applied to, with white areas being fully opaque and black areas being fully transparent.
<rect width="100%" height="100%" fill="white" />
<g transform="translate(2 30)"> ... </g>
After the mask, add another rectangle and set its mask attribute to your mask. This rectangle is the white background you wanted, so give it a white fill.
<rect width="100%" height="100%" fill="white" mask="url(#m)" />
This should give you the effect you want. Check out this fiddle: http://jsfiddle.net/9tT6T/

Why is this background image not working for this SVG?

I want to create this triangular/polygonal shape using SVGs and assign it a background image.
<svg class="svg-graphic" width="100%" height="100%" class="svg-graphic" viewBox="0 0 100 100" >
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
<image x="0" y="0" xlink:href="http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg"></image>
</pattern>
<polygon points="0, 0, 100, 0, 50, 50" fill="url('http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg')"/>
</defs>
</svg>
Very similar to this question here:
Happy Chanukkah

The problem is the fill="#url"
you have to give the polygon/path a class and then from that class, assign the background image (that's already defined in the defs):
.imageFill {
fill: url(#image);
}

The fill attribute references the pattern, in your case it's url(#image) (like you'd do in CSS). Repeating the image's URL is pointless there. See the accepted answer in the question you linked to.
Apart from that you must make sure, that the view box spanned by the <pattern> actually matches the shape it shall be applied to. See this updated fiddle: http://jsfiddle.net/boldewyn/k7Rk9/12/

Resources