基于shape-outside和svg实现可交互拖拉塑形的文本环绕效果

shape-outside: polygon and SVG

h5, svg, 排版, layout, css, basic-shape

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2698
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var SVG_NS = 'http://www.w3.org/2000/svg';
var XLink_NS = 'http://www.w3.org/1999/xlink';
var svg = document.querySelector("svg");
var contenedor = document.querySelector("#contenedor");
var elId, circ;
m = { // mouse position
    x: 0,
    y: 0
};
var dragging = false;

var ry = [];
ry[0] = {
    x: 100,
    y: 50
};

ry[1] = {
    x: 175,
    y: 120
};

ry[2] = {
    x: 200,
    y: 200
};

ry[3] = {
    x: 260,
    y: 270
};

ry[4] = {
    x: 250,
    y: 380
};

ry[5] = {
    x: 100,
    y: 430
};

function getPoints(ry) {
    var points = "0,0 ";
    for (var i = 0; i < ry.length; i++) {
        points += ry[i].x + "," + ry[i].y + " ";
    }
    points += "0,500"
    return points;
}

function drawPolygon(ry, polygon) {
    var points = getPoints(ry);
    polygon.setAttributeNS(null, 'points', points);
}

var polygon = document.createElementNS(SVG_NS, 'polygon');
drawPolygon(ry, polygon);
svg.appendChild(polygon);

for (var i = 0; i < ry.length; i++) {
    var circ = document.createElementNS(SVG_NS, 'circle');
    circ.setAttributeNS(null, 'cx', ry[i].x);
    circ.setAttributeNS(null, 'cy', ry[i].y);
    circ.setAttributeNS(null, 'r', "15");
    circ.setAttributeNS(null, 'id', "circ" + i);
    svg.appendChild(circ);
}

var c = document.querySelectorAll("svg circle");

svg.addEventListener("mousedown", function(evt) {
    if (evt.target.id.search("circ") == 0) {
        dragging = true;
        elId = evt.target.id.replace("circ", "");
        circ = c[elId];
    }
}, false);

svg.addEventListener("mousemove", function(evt) {
    if (dragging) {
        m = oMousePos(svg, evt);

circ.setAttributeNS(null, 'cx', m.x);
        circ.setAttributeNS(null, 'cy', m.y);

ry[elId].x = m.x;
        ry[elId].y = m.y;

drawPolygon(ry, polygon);
        shapeOutsidePolygon(ry);

}
}, false);

svg.addEventListener("mouseup", function(evt) {
    dragging = false;
}, false);

/*svg.addEventListener("mouseout", function(evt) {
  dragging = false;
}, false);*/

function oMousePos(el, evt) {
    var ClientRect = el.getBoundingClientRect();
    return { //objeto
        x: Math.round(evt.clientX - ClientRect.left),
        y: Math.round(evt.clientY - ClientRect.top)
    }
}

function shapeOutsidePolygon(ry) {
    var shape_outside = "polygon(";
    for (var i = 0; i < ry.length; i++) {
        shape_outside += ry[i].x + "px " + ry[i].y + "px,";

}
    shape_outside += "0 500px)";
    console.clear();
    console.log(shape_outside)
    document.querySelector("#shape").style.webkitShapeOutside = shape_outside;
    document.querySelector("#shape").style.shapeOutside = shape_outside;
}

shapeOutsidePolygon(ry)

编译

CSS

HTML

<h4>Please drag the circles to reshape the polygon</h4>
<div id="contenedor">
    <div class="text">
        <div id="shape"></div>
        <p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos
            y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas con sus pantuflos de lo mismo,
            los días de entre semana se honraba con su vellori de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera.
            Frisaba la edad de nuestro hidalgo con los cincuenta años, era de complexión recia, seco de carnes, enjuto de rostro; gran madrugador y amigo de la caza. uieren decir que tenía el sobrenombre de Quijada o Quesada (que en esto hay alguna diferencia
            en los autores que deste caso escriben), aunque por conjeturas verosímiles se deja entender que se llama Quijana; pero esto importa poco a nuestro cuento; basta que en la narración dél no se salga un punto de la verdad. </p>
    </div>
    <svg width="500" height="500" viewBox="0 0 500 500">
    </svg>
</div>

shape-outside: polygon and SVG

h5, svg, 排版, layout, css, basic-shape

编辑器支持Emmet

快捷键

shape-outside: polygon and SVG

h5, svg, 排版, layout, css, basic-shape

使用svg path和css clip-path实现单击并保持按钮动画特效

使用three svgloader实现svg图像和3D粘稠物混合特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：