你怎么能目标的一部分svg图像

所以我有这个类似的SVG图像。白色与黑点透明。我必须用这种图案覆盖整个背景，然后针对一个5x5平方点的点区域来改变它们的颜色。

什么是最简单的方法或实现此目的的常用方法？

2016-03-04 Help me

你能否澄清一点您预期的结果会是什么？ – Philip

@Philip起初我需要能够改变一个SVG对象的颜色。然后我需要这个四点图案覆盖所有的视口，这将使它有数百个点。然后，我需要通过将它们与其他点不同的颜色区分开来，从这些点中划出方形。最后，我必须在圆点上移动正方形，所以圆点本身不会移动，但通过着色下一行圆点使其看起来像正在移动。 –

您可以在HTML5文档中使用嵌入式SVG。您可以将完成的SVG嵌入到HTML5文件中，将ID添加到圈子中并使用JS访问/更改它们。或者你使用JS动态生成整个嵌入式SVG。但是，您无法访问通过''添加到HTML中的SVG元素。 – Biggie

如果直接嵌入到HTML代码中，则可以访问SVG图像的元素。你甚至可以使用JavaScript创建整个SVG。这里有一个例子： https://jsfiddle.net/da_mkay/eyskzpsc/7/

<!DOCTYPE html> 
<html> 
<head> 
<title>SVG dots</title> 
</head> 
<body> 
</body> 

<script> 
var makeSVGElement = function (tag, attrs) { 
    var element = document.createElementNS('http://www.w3.org/2000/svg', tag) 
    for (var k in attrs) { 
    element.setAttribute(k, attrs[k]) 
    } 
    return element 
} 


var makeDotSVG = function (width, height, dotRadius) { 
    var svg = makeSVGElement('svg', { width: width, height: height, 'class': 'dot-svg' }) 
    , dotDiameter = dotRadius*2 
    , dotsX = Math.floor(width/dotDiameter) 
    , dotsY = Math.floor(height/dotDiameter) 

    // Fill complete SVG canvas with dots 
    for (var x = 0; x < dotsX; x++) { 
    for (var y = 0; y < dotsY; y++) { 
     var dot = makeSVGElement('circle', { 
     id: 'dot-'+x+'-'+y, 
     cx: dotRadius + x*dotDiameter, 
     cy: dotRadius + y*dotDiameter, 
     r: dotRadius, 
     fill: '#B3E3A3' 
     }) 
     svg.appendChild(dot) 
    } 
    } 

    // Highlight the hovered dots by changing its fill-color 
    var curMouseOver = function (event) { 
    var dotX = Math.floor(event.offsetX/dotDiameter) 
     , dotY = Math.floor(event.offsetY/dotDiameter) 
     , dot = svg.getElementById('dot-'+dotX+'-'+dotY) 
    if (dot !== null) { 
     dot.setAttribute('fill', '#73B85C') 
    } 
    } 

    svg.addEventListener('mouseover', curMouseOver) 

    return svg 
} 

// Create SVG and add to body 
var myDotSVG = makeDotSVG(500, 500, 5) 
console.log(document.body) 
document.body.appendChild(myDotSVG) 
</script> 
</html>

来源

2016-03-13 22:08:31 Biggie

你怎么能目标的一部分svg图像

回答

相关问题