123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- 'use strict';
- exports.type = 'perItem';
- exports.active = false;
- exports.description = 'removes elements that are drawn outside of the viewbox (disabled by default)';
- var SVGO = require('../lib/svgo.js'),
- _path = require('./_path.js'),
- intersects = _path.intersects,
- path2js = _path.path2js,
- viewBox,
- viewBoxJS;
- /**
- * Remove elements that are drawn outside of the viewbox.
- *
- * @param {Object} item current iteration item
- * @return {Boolean} if false, item will be filtered out
- *
- * @author JoshyPHP
- */
- exports.fn = function(item) {
- if (item.isElem('path') && item.hasAttr('d') && typeof viewBox !== 'undefined')
- {
- // Consider that any item with a transform attribute or a M instruction
- // within the viewBox is visible
- if (hasTransform(item) || pathMovesWithinViewBox(item.attr('d').value))
- {
- return true;
- }
- var pathJS = path2js(item);
- if (pathJS.length === 2)
- {
- // Use a closed clone of the path if it's too short for intersects()
- pathJS = JSON.parse(JSON.stringify(pathJS));
- pathJS.push({ instruction: 'z' });
- }
- return intersects(viewBoxJS, pathJS);
- }
- if (item.isElem('svg'))
- {
- parseViewBox(item);
- }
- return true;
- };
- /**
- * Test whether given item or any of its ancestors has a transform attribute.
- *
- * @param {String} path
- * @return {Boolean}
- */
- function hasTransform(item)
- {
- return item.hasAttr('transform') || (item.parentNode && hasTransform(item.parentNode));
- }
- /**
- * Parse the viewBox coordinates and compute the JS representation of its path.
- *
- * @param {Object} svg svg element item
- */
- function parseViewBox(svg)
- {
- var viewBoxData = '';
- if (svg.hasAttr('viewBox'))
- {
- // Remove commas and plus signs, normalize and trim whitespace
- viewBoxData = svg.attr('viewBox').value;
- }
- else if (svg.hasAttr('height') && svg.hasAttr('width'))
- {
- viewBoxData = '0 0 ' + svg.attr('width').value + ' ' + svg.attr('height').value;
- }
- // Remove commas and plus signs, normalize and trim whitespace
- viewBoxData = viewBoxData.replace(/[,+]|px/g, ' ').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, '');
- // Ensure that the dimensions are 4 values separated by space
- var m = /^(-?\d*\.?\d+) (-?\d*\.?\d+) (\d*\.?\d+) (\d*\.?\d+)$/.exec(viewBoxData);
- if (!m)
- {
- return;
- }
- // Store the viewBox boundaries
- viewBox = {
- left: parseFloat(m[1]),
- top: parseFloat(m[2]),
- right: parseFloat(m[1]) + parseFloat(m[3]),
- bottom: parseFloat(m[2]) + parseFloat(m[4])
- };
- var path = new SVGO().createContentItem({
- elem: 'path',
- prefix: '',
- local: 'path'
- });
- path.addAttr({
- name: 'd',
- prefix: '',
- local: 'd',
- value: 'M' + m[1] + ' ' + m[2] + 'h' + m[3] + 'v' + m[4] + 'H' + m[1] + 'z'
- });
- viewBoxJS = path2js(path);
- }
- /**
- * Test whether given path has a M instruction with coordinates within the viewBox.
- *
- * @param {String} path
- * @return {Boolean}
- */
- function pathMovesWithinViewBox(path)
- {
- var regexp = /M\s*(-?\d*\.?\d+)(?!\d)\s*(-?\d*\.?\d+)/g, m;
- while (null !== (m = regexp.exec(path)))
- {
- if (m[1] >= viewBox.left && m[1] <= viewBox.right && m[2] >= viewBox.top && m[2] <= viewBox.bottom)
- {
- return true;
- }
- }
- return false;
- }
|