你怎麼能目標的一部分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圖像

回答

相關問題