We Keep Coding

Javascript SVG collision detection based on color within svg image

I am making a game where the player character moves around a grid that is an SVG image. I cannot find how to determine if the coordinates the character will move to will be a color that does not allow movement.
The movement itself works just fine and as expected, I just cannot figure out how to check the color or if there is another way to detect collision on a single SVG image.
Here is the SVG in the HTML file:
<svg width="600" height="580">
<svg viewBox="0 0 100 100" id="ViewBox">
<image x="0" y="0" xlink:href="doodmap.svg"></image>
<image x="40" y="40" width="18" height="18" xlink:href="Mage.svg"id="PlayerSprite"/>
</svg>
</svg>
Here is my movement function in the javascript file:
function downmove(){
if(playerstats.position.y < 580){
playerstats.position.y += 20;
viewboxy += 20;
document.getElementById("PlayerSprite").setAttribute("y", playerstats.position.y);
document.getElementById("ViewBox").setAttribute("viewBox", viewboxx + " " + viewboxy + " 100 100");
PMove();
}
}
What I expect is to be able to detect what color the next square is and only move if the next square is not a certain color.

Get the current matrix transformation of an SVG element

I know a very easy way to get the current matrix transformation of any SVG element:
// 't' is a string
var t = window.getComputedStyle(nativeElement, null).transform
console.log(t);
The problem is that the previous method returns numbers with no more than six decimals. For example, the previous code may return:
matrix(0.965926, 0.258819, -0.258819, 0.965926, 0, 0)
Is there a way to get the matrix transformation of any SVG element more accurately?

To get the current transform attribute as an SVGMatrix object, you can use:
element.transform.baseVal.consolidate().matrix
var myrect = document.getElementById("myrect");
console.log(myrect.transform.baseVal.consolidate().matrix);
<svg>
<rect id="myrect" width="10" height="10" transform="scale(2) rotate(45)"/>
</svg>

Consolidation can change your element 'transform' attribute value.
You can also get a matrix without changing the transformation attribute by transforming the element matrix to the parent.
See documentation about the:
getTransformToElement
function getMatrix(element) {
var matrix = element.parentNode
.getScreenCTM()
.inverse()
.multiply(element.getScreenCTM());
return matrix;
}
var myrect = document.getElementById("myrect");
console.log(getMatrix(myrect));
<svg>
<rect id="myrect" width="10" height="10" transform="scale(2) rotate(45)"/>
</svg>

In the case if you know that your SVG element has no ancestors wich were transformed you can use SVGelement.getCTM() function for it because it is shorter. I think that CTM in the function name is the short form from «current transformation matrix».
var rect = document.querySelector("#rect");
console.log(rect.getCTM());
<svg>
<rect id="rect" width="10" height="10" transform="scale(2) rotate(45)"/>
</svg>
Difference rect.getCTM() vs. rect.transform.baseVal.consolidate().matrix
But you should be careful about the use from this function because it only gives the same result like from the matrix rect.transform.baseVal.consolidate().matrixas long as no ancestor elements have a transform. For example:
var rect = document.querySelector("#rect"),
ctmMatrix = rect.getCTM(),
baseValMatrix = rect.transform.baseVal.consolidate().matrix;
console.log('CTM Matrix: translateX = '+ctmMatrix.e+', translateY = '+ctmMatrix.f);
console.log('BaseVal Matrix: translateX = '+baseValMatrix.e+', translateY = '+baseValMatrix.f);
<svg>
<g transform="translate(35,45)">
<rect id="rect" width="10" height="10" transform="translate(35,45)"/>
</g>
</svg>
I thank #PaulLeBeau for the explanation about the difference between this matrixes.

Snap SVG: String to Element

In jQuery you can simply creating an element by providing a string, like so:
var newElement = $('<div></div>');
How can I do the same thing in Snap SVG? I have a string like
<rect x="100" y="100" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 1825.4047 1024.3746)" fill="#7EC242" width="230.02" height="56.723" stroke="#64bc46"/>
And I need an Element I can append to an already existing Snap document. I tried fragments, but they don't have all functions I need to manipulate the element afterwards.

I believe you can do it with parse (I removed the transform so the code could work in the small SO snippet window):
var s = Snap("#svg");
var string = '<rect x="100" y="100" fill="#7EC242" width="230.02" height="56.723" stroke="#64bc46"/>'
var rect = Snap.parse(string);
s.append(rect);
<script src="http://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg id="svg" width="400" height="200">
</svg>

need to set value for r(radius) in the <circle> tag using javascript

I have a scatter plot with line created using D3.js (as shown in the image).
The initial value to the circle radius is set to 4 however, when mouseover or click event are fired on the circle it should become 6 (r=6).
Whereas I am able to achieve this in chrome as following:
document.getElementById('dotGain' + count).style.r = 6;
the same doesn't work in IE.
The HTML created as dom is:
<circle xmlns="http://www.w3.org/2000/svg" class="dotGain" id="dotGain51" style="cursor: pointer; fill: red;" cx="440.621" cy="3.78507" r="4" />
I need to modify the r="4" to "6" on click/mouseOver in IE.
Some added help:
I tried the following to achieve the required in IE, but in vain
document.getElementById('dotGain' + count).r.animVal.valueAsString = "6";
document.getElementById('dotGain' + count).r.animVal.value = 6;

You should be changing the r attribute, not the style; and this is wrong: document.getElementById('#MyCircle') because you have a hashtag in the id name.
See a working example here:
var c = document.getElementById('c');
c.addEventListener('click', function(){
c.setAttribute('r', 6);
})
Click the circle
<svg viewBox="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="4" id="c"/>
</svg>

r is a element attribute. To change it You can use jQuery
$(el).attr('r', 6)
or in vanilla js
el.setAttribute('r', 6);

how to scale the element created by use by keeping the fixed position in svg

I want to scale the element created by use by keeping the fixed position in svg.
I read this
but my element is created by use
so it shows
Simply I can remove the old one and create a new one ,but I feel this a bit trouble.
So I wonder whether it exists any convenient way?
function tableBindMouseClick(parametersObject)
{
var table = document.getElementById("PointsTable");
var length = $('#PointsTable tbody tr').length;//get table rows number
for(var i =0;i<length;i++)
{
var id = i;
$($('#PointsTable tbody tr')[i]).bind('click',
(function(id)
{
return function()
{
var p = parametersObject.pointArray[id];
var x = p[0] -5;//coordinate x
var y = p[1] -5;//coordinate y
var icon = document.getElementById("point"+id);
icon.setAttributeNS(null, "transform", "translate("+-x+"," + -y +") scale(3) translate("+x+","+y+")");
};
})(id));
}
I do not know whether it is enough.
I am still modifying it.It can run but its effect is still incorrect.
The result
I can not see the error...
PS:Unfortunately,I use the defs element instead of symbol element to create icon.I also want to know difference in them,including g element.

I complete it by this parameters:
icon.setAttributeNS(null, "transform", "translate("+-2*x+"," + -2*y +")" + " scale(3)" );
I think the post makes some mistakes...
This example may make sense.
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="5000" height="5000" viewBox="0 0 5000 5000">
<rect x="100" y="100" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<rect x="100" y="100" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"
transform ="translate(-230,-230 ) scale(3)" />
</svg>
</body>
</html>