当前位置: 首页 > 知识库问答 >
问题:

是否可以使用SVG rect作为高度可变的HTML元素的边框

彭华皓
2023-03-14

我正在尝试使用SVG在HTML块周围创建一个具有固定宽度但高度灵活的点状边框。我很接近,但不能得到底部显示。

这里有一个小提琴(小提琴包含SVG图像,因此它可以内联URL编码元素,特别是#%23)

SVG代码如下所示:

<svg width="300px" height="100%" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="290" height="100%" 
    style="fill: yellow; fill-opacity: 0.5; stroke: #009fe3; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 7"/>
</svg>
div.block {
  box-sizing: border-box;
  padding: 10px;
  width: 300px;
  background-image: url("dotted-border.svg");
}

我知道我可以添加另一个图像并使用CSS:after,但我很好奇!

共有1个答案

江温书
2023-03-14

为什么不使用直接的CSS边框呢?

div.block {
    box-sizing: border-box;
    padding: 10px;
    width: 300px;
    background-image: url("data:image/svg+xml;utf8,<svg width='300px' height='100%' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='5' width='290' height='100%' style='fill: yellow; fill-opacity: 0.5; stroke: %23009fe3; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 7'/></svg>");
}

div.block2 {
    box-sizing: border-box;
    padding: 4px;
    margin:3px;
    width: 294px;
    background-color:rgba(255,255,0,0.5);
    border:3px dotted #009fe3;
}

/* Alternative method using CSS3 border-image: */
div.block3 {
    box-sizing: border-box;
    padding: 4px;
    margin:3px;
    width: 294px;
    background-color:rgba(255,255,0,0.5);
    border:8px solid transparent;
    -webkit-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAbklEQVR4nGL4W8zBMJAYmbMCiJ9C8Qosimkijyz5Hw2vQNNME3mYgqdYFDxFMoBm8oPGAQMeBQOeCAdFNhxwB4yWA6PlwGg5MODZcMAdMFoOjJYDo+XAgGfDAXfAaDkwWg6MlgMDggEAAAD//wMAIRKl6nQ6gLIAAAAASUVORK5CYII=) round;
    -o-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAbklEQVR4nGL4W8zBMJAYmbMCiJ9C8Qosimkijyz5Hw2vQNNME3mYgqdYFDxFMoBm8oPGAQMeBQOeCAdFNhxwB4yWA6PlwGg5MODZcMAdMFoOjJYDo+XAgGfDAXfAaDkwWg6MlgMDggEAAAD//wMAIRKl6nQ6gLIAAAAASUVORK5CYII=) round;
    border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAbklEQVR4nGL4W8zBMJAYmbMCiJ9C8Qosimkijyz5Hw2vQNNME3mYgqdYFDxFMoBm8oPGAQMeBQOeCAdFNhxwB4yWA6PlwGg5MODZcMAdMFoOjJYDo+XAgGfDAXfAaDkwWg6MlgMDggEAAAD//wMAIRKl6nQ6gLIAAAAASUVORK5CYII=) round;
    border-image-slice: 25%;
}
<div class="block">
    <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quasi officia vero aut. Velit ratione sapiente fugiat rerum eos ipsa praesentium autem similique vitae reprehenderit et tempora optio eveniet facilis. (SVG)</article>
</div>
<p></p>
<div class="block2">
    <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quasi officia vero aut. Velit ratione sapiente fugiat rerum eos ipsa praesentium autem similique vitae reprehenderit et tempora optio eveniet facilis. (CSS)</article>
</div>
<p></p>
<div class="block3">
    <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quasi officia vero aut. Velit ratione sapiente fugiat rerum eos ipsa praesentium autem similique vitae reprehenderit et tempora optio eveniet facilis. (CSS3)</article>
</div>
 类似资料:
  • 我用这个包裹https://www.npmjs.com/package/vue-sweetalert2我想通过vue中的vue组件。以html的形式浏览。 但什么都没有。我是VueJs新手,我仍然不完全理解如何将组件作为html插入。

  • 我想拆分我的验证器的声明和实现,与Spring boot环境中的这个问题非常相似。看起来好像是我让它几乎起作用了。我看到我的验证器实际上是由Spring验证调用的,但在执行验证后,Hibernate会抛出一个异常: 这是因为是一个接口(如预期)。 我已经这样配置了Spring(这是一个不同问题的答案): 我的自定义验证器: 所以它试图通过验证器名称找到一个Spring bean。所以我有一个验证器

  • 问题内容: 我正在寻找有关如何解决我的问题的技巧。 我在表中有一个html元素(如选择框输入字段)。现在,我想复制对象并从副本中生成一个新对象,并使用JavaScript或jQuery生成一个对象。我认为这应该会以某种方式起作用,但目前我一点也不了解。 这样的东西(伪代码): 问题答案: 使用您的代码,您可以使用cloneNode()方法在纯JavaScript中执行以下操作: 或使用jQuery

  • 问题内容: 我正在尝试使用伪元素CSS选择器设置元素的样式 似乎元素不能低于元素本身。 有没有办法使伪元素低于元素本身? 问题答案: 伪元素被视为其关联元素的后代。要将伪元素放置在其父元素下方,您必须创建一个新的堆栈上下文以更改默认的堆栈顺序。 放置伪元素(绝对)并分配z索引值(不是“ auto”)会创建新的堆叠上下文。

  • 问题内容: 使用和,我一直在页面上隐藏/显示一个元素,但是有两个按钮,一个用于隐藏,一个用于显示。我现在想要 一个按钮来同时切换 两者 。 我的HTML / JavaScript是这样的: 我想要的HTML / JavaScript: 如何检测元素是否可见? 问题答案: 您正在寻找: 尽管您可能考虑到仍在其他地方使用它,但应该将选择器更改为使用jQuery: 重要的是要注意,如果目标元素的父元素中

  • 问题内容: 期望: 结果: Jsoup可以将值HTML转换为XHTML吗? 问题答案: 见: