html - 有没有办法让 svg 元素可以在 html 页面上突出显示?

标签 html css svg

我在页面上有一个 svg 元素,可以对其进行编辑,但是为此我需要选择它(请参阅带有文本的屏幕截图示例),就像页面上的普通文本或图像一样。无法使用 svg 元素做到这一点,也无法找到有关如何实现它的任何信息。

enter image description here

<!DOCTYPE html>
<html>
<body>
<div style="height:100px;width:100px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
 </svg>
</div>

</body>
</html>

最佳答案

添加一个 tabindex 属性使其可选择(与 html 相同)。

<!DOCTYPE html>
<html>
<body>
<div style="height:100px;width:100px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<circle tabindex="1" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
 </svg>
</div>

</body>
</html>

关于html - 有没有办法让 svg 元素可以在 html 页面上突出显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53224880/

相关文章:

javascript - 图表 js 的范围选择器未显示

javascript - 如何使用 vanilla JavaScript 查找 div 的宽度?

html - 空重叠的 css 网格单元会阻止在 Firefox 和 Edge 中点击

javascript - JQuery 检查页面加载时输入是否为空

javascript - 上传 React 渲染的 SVG

html - 如何避免两个边界之间的差距?

javascript - 不显示某些内容并阻止一个元素

css - 如何在 React Ant 设计布局中使 Logo (图像)响应?

html - 如何将 svg 虚线从一点动画化到另一点?

javascript - Firefox 无法正确呈现 SVG,其他浏览器可以