主页 / 问题 / 1079299
Accepted
bully
Asked:2020-02-07 01:45:43 +0000 UTC2020-02-07 01:45:43 +0000 UTC

如何将纯svg注入html？（svg按钮）

  • 772

我将图像转换为svg，现在您需要将其放入站点代码中。但不是链接，而是纯代码。你需要把它放在这里：

<input type="image" src="">

怎么做？究竟应该包括什么？

SVG：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
</svg>
html

1 个回答

  1. Best Answer

    这是一个简单的 Svg 按钮的样子

    document.getElementById('button').addEventListener('click', function() {
  console.log('click')
})
    circle {
  transition: 200ms;
  cursor: pointer;
}

circle:hover {
  fill: steelblue
}

circle:active {
  r: 240;
}

text {
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 200px;
  pointer-events: none;
}
    <svg id=button viewbox=0,0,500,500 width="50px" height="50px">
  
  <circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
  <text x="250" y="250">🥕</text>
</svg>

    • 4

相关问题